@selfcommunity/react-ui 0.11.0 → 1.0.0

package/lib/esm/components/UserAddPaymentMethodForm/UserAddPaymentMethodForm.js

@@ -1,17 +1,15 @@
-import { __awaiter, __rest } from "tslib";
+import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import BaseDialog from '../../shared/BaseDialog';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { loadStripe } from '@stripe/stripe-js';
-import { Button, Paper, Stack, Typography } from '@mui/material';
+import { Button, Paper, Stack, styled, Typography } from '@mui/material';
 import { AddressElement, PaymentElement, useElements } from '@stripe/react-stripe-js';
 import { getDefaultLocale } from '../../utils/payment';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 const classes = {
     root: `${PREFIX}-root`,
@@ -55,7 +53,7 @@ export default function UserAddPaymentMethodForm(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props, rest = __rest(props, ["className", "customer", "collectBillingAddress", "handleSuccess", "handleClose"]);
+    const { className = null, customer, collectBillingAddress = false, handleSuccess, handleClose } = props;
     // CONTEXT
     const scUserContext = useSCUser();
     // STATE
@@ -131,10 +129,10 @@ export default function UserAddPaymentMethodForm(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs("form", Object.assign({ onSubmit: handleSubmit }, { children: [_jsx(PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && (_jsx(Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: addressState.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.line1, _jsx("br", {}), addressState.address.line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : (_jsxs(_Fragment, { children: [_jsx(AddressElement, { onChange: (event) => {
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: _jsxs("form", Object.assign({ onSubmit: handleSubmit }, { children: [_jsx(PaymentElement, { id: "payment-element", options: paymentElementOptions, onReady: () => setReady(true) }), collectBillingAddress && (_jsx(Paper, Object.assign({ variant: "outlined", className: classes.address }, { children: Object.keys(addressState).length && !isEditingBillingAddress ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: addressState.name })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [addressState.address.line1, _jsx("br", {}), addressState.address.line2] })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [addressState.address.postal_code, " - ", addressState.address.city, " - ", addressState.address.country] })), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: "contained", disabled: !elements, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: "Change" }))] })) : (_jsxs(_Fragment, { children: [_jsx(AddressElement, { onChange: (event) => {
                                     setAddressState(event.value);
                                 }, options: {
                                     mode: 'billing',
                                     defaultValues: addressState
-                                } }), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: _jsx(FormattedMessage, { id: 'ui.userAddPaymentMethodForm.useDefaultMethod', defaultMessage: 'ui.userAddPaymentMethodForm.useDefaultMethod' }) }))] })) }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [_jsx(Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), _jsx(LoadingButton, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && _jsx("div", { children: errorMessage })] })) })));
+                                } }), _jsx(Button, Object.assign({ sx: { mt: 1 }, variant: "contained", disabled: !elements || loading || !ready, onClick: () => setIsEditingBillingAddress(!isEditingBillingAddress) }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.useDefaultMethod", defaultMessage: "ui.userAddPaymentMethodForm.useDefaultMethod" }) }))] })) }))), _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "flex-end", alignItems: "center", spacing: 2, mt: 3 }, { children: [_jsx(Button, Object.assign({ onClick: onHandleClose, variant: "outlined" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.cancelButton", defaultMessage: "ui.userAddPaymentMethodForm.cancelButton" }) })), _jsx(Button, Object.assign({ disabled: !ready, loading: loading, type: "submit", variant: "contained" }, { children: _jsx(FormattedMessage, { id: "ui.userAddPaymentMethodForm.addButton", defaultMessage: "ui.userAddPaymentMethodForm.addButton" }) }))] })), errorMessage && _jsx("div", { children: errorMessage })] })) })));
 }

package/lib/esm/components/UserAutocomplete/UserAutocomplete.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
 import match from 'autosuggest-highlight/match';
@@ -97,19 +97,21 @@ const UserAutocomplete = (inProps) => {
     }, []);
     return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsx(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: filteredUsers || [], filterOptions: filterOptions, getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
                     setInputValue(newInputValue);
-                }, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => (option ? val.id === option.id : false), renderTags: (value, getTagProps) => value.map((option, index) => {
-                    const username = typeof option === 'string' ? option : option.username;
-                    const avatar = typeof option === 'string' ? '' : option.avatar;
-                    const id = typeof option === 'string' ? `fallback-${option}` : option.id;
-                    return _jsx(Chip, Object.assign({ avatar: _jsx(Avatar, { src: avatar }), label: username }, getTagProps({ index })), id);
+                }, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => (option ? val.id === option.id : false), renderValue: (value, getItemProps) => value.map((option, index) => {
+                    if (typeof option === 'object') {
+                        const _a = getItemProps({ index }), { key } = _a, rest = __rest(_a, ["key"]);
+                        return _jsx(Chip, Object.assign({ avatar: _jsx(Avatar, { src: option.avatar }), label: option.username }, rest), key || option.id);
+                    }
+                    return _jsx(Chip, Object.assign({ avatar: _jsx(Avatar, { src: "" }), label: option }, getItemProps), `fallback-${option}`);
                 }), renderOption: (props, option, { inputValue }) => {
+                    const { key } = props, rest = __rest(props, ["key"]);
                     const matches = match(option.username, inputValue);
                     const parts = parse(option.username, matches);
-                    return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, { children: part.text }, index))) })] })));
-                }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: filteredUsers.length > 0 ? (_jsxs(Fragment, { children: [isLoading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null }) }))) }, rest)), _jsx(Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        icon: (...chunks) => _jsx(Icon, { children: chunks })
+                    return (_jsxs(Box, Object.assign({ component: "li" }, rest, { children: [_jsx(Avatar, { alt: option.username, src: option.avatar, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, { children: part.text }, index))) })] }), key));
+                }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                        input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'off', endAdornment: filteredUsers.length > 0 ? (_jsxs(_Fragment, { children: [isLoading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) : null })
+                    } }))) }, rest)), _jsx(Typography, Object.assign({ variant: "body2", color: "primary", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.info", defaultMessage: "ui.userAutocomplete.textarea.info", values: {
+                        icon: (chunks) => _jsx(Icon, { children: chunks }, "ui.userAutocomplete.textarea.info.icon")
                     } }) })), _jsx(TextField, { label: _jsx(FormattedMessage, { id: "ui.userAutocomplete.textarea.label", defaultMessage: "ui.userAutocomplete.textarea.label" }), multiline: true, minRows: 4, fullWidth: true, margin: "normal", value: textAreaValue, onChange: handleTextAreaChange })] })));
 };
 export default UserAutocomplete;

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

@@ -5,5 +5,5 @@ export default function UserBillingInfoSkeleton(props) {
     if (props.mode === UserBillingInfoMode.READ) {
         return (_jsxs(Box, { children: [_jsx(Skeleton, { variant: "rectangular", height: 15, width: 200, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 250, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 220, sx: { mb: 2 } }), _jsx(Skeleton, { variant: "rectangular", height: 15, width: 190, sx: { mb: 2 } })] }));
     }
-    return (_jsxs(Grid, Object.assign({ container: true, spacing: 3 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6 }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: 6, justifyContent: 'center' }, { children: _jsx(Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
+    return (_jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 } }, { children: _jsx(Skeleton, { variant: "rectangular", height: 50 }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: 6 }, justifyContent: "center" }, { children: _jsx(Skeleton, { variant: "rounded", height: 30, width: 100 }) }))] })));
 }

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

@@ -26,10 +26,10 @@ export interface UserBillingInfoProps {
 /**
  * BillingInfo component interface reference
  */
-export declare type UserBillingInfoRef = {
+export type UserBillingInfoRef = {
     isBillingInfoCompleted: () => boolean;
     showError: (e: string) => void;
     billingMode: () => UserBillingInfoMode;
 };
-declare const _default: React.ForwardRefExoticComponent<Pick<UserBillingInfoProps, keyof UserBillingInfoProps> & React.RefAttributes<UserBillingInfoRef>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<UserBillingInfoProps, "ref"> & React.RefAttributes<UserBillingInfoRef>>;
 export default _default;

package/lib/esm/components/UserBillingInfo/UserBillingInfo.js

@@ -12,7 +12,6 @@ import { reducer, getInitialState, actionTypes } from './reducer';
 import { countries, COUNTRY_CODES } from '../../constants/Country';
 import UserBillingInfoSkeleton from './Skeleton';
 import Grow from '@mui/material/Grow';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 // import {getCountryOption} from '../../utils/address';
 import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
@@ -69,7 +68,7 @@ const UserBillingInfo = (inProps, ref) => {
     const scUserContext = useSCUser();
     // STATE
     const [state, dispatch] = useReducer(reducer, getInitialState({ mode }));
-    const [customer, setCustomer] = useState();
+    const [customer] = useState();
     // HOOKS
     const { isPaymentsEnabled } = useSCPaymentsEnabled();
     const { enqueueSnackbar } = useSnackbar();
@@ -444,47 +443,56 @@ const UserBillingInfo = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id }, rest, { ref: componentRef }, { children: _jsx(Fragment, { children: state.isLoading ? (_jsx(UserBillingInfoSkeleton, { mode: mode })) : (_jsx(Fragment, { children: state.mode === UserBillingInfoMode.READ ? (_jsxs(_Fragment, { children: [state.name ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, _jsx("br", {}), state.address_line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && _jsx(Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && (_jsxs(_Fragment, { children: [state.tax_id_data && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : (_jsx(Typography, Object.assign({ variant: 'body1' }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && (_jsx(Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: _jsx(FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : (_jsx(Box, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 3 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "name", name: "name", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(Autocomplete, { id: "country-select-demo", options: countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                                        // @ts-ignore
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), id: id }, rest, { ref: componentRef }, { children: _jsx(Fragment, { children: state.isLoading ? (_jsx(UserBillingInfoSkeleton, { mode: mode })) : (_jsx(Fragment, { children: state.mode === UserBillingInfoMode.READ ? (_jsxs(_Fragment, { children: [state.name ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: state.name })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [state.address_line1, _jsx("br", {}), state.address_line2] })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [state.address_postal_code, " - ", state.address_city, " - ", state.address_country && state.address_country.label] })), Boolean(state.tax_code && !state.isBusiness) && _jsx(Typography, Object.assign({ variant: "body1" }, { children: state.tax_code })), state.isBusiness && (_jsxs(_Fragment, { children: [state.tax_id_data && _jsxs(Typography, Object.assign({ variant: "body1" }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && _jsxs(Typography, Object.assign({ variant: "body1" }, { children: ["SDI: ", state.sdi] })), state.pec && _jsxs(Typography, Object.assign({ variant: "body1" }, { children: ["PEC: ", state.pec] }))] }))] })) : (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && (_jsx(Button, Object.assign({ sx: { mt: 1 }, variant: "contained", size: "small", disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: _jsx(FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : (_jsx(Box, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "name", name: "name", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address1", defaultMessage: "ui.userBillingInfo.address1" }), onChange: handleChange('address_line1'), value: state.address_line1, error: Boolean(state.addressLine1Error), helperText: state.addressLine1Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.address2", defaultMessage: "ui.userBillingInfo.address2" }), onChange: handleChange('address_line2'), value: state.address_line2, error: Boolean(state.addressLine2Error), helperText: state.addressLine2Error, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(Autocomplete, { id: "country-select-demo", options: countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
                                         const { key } = props, rest = __rest(props, ["key"]);
                                         return (_jsxs(Box, Object.assign({ component: "li", sx: { '& > img': { mr: 2, flexShrink: 0 } } }, rest, { children: [_jsx("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${option.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${option.code.toLowerCase()}.png`, alt: "" }), option.label, " (", option.code, ")"] }), key));
-                                    }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.country", defaultMessage: "ui.userBillingInfo.country" }), fullWidth: true, id: "address_country", name: "address_country", error: Boolean(state.addressCountryError), InputProps: Object.assign(Object.assign({}, params.InputProps), (state.address_country && {
-                                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${state.address_country.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${state.address_country.code.toLowerCase()}.png`, alt: "" }) })))
-                                        })), inputProps: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' // disable autocomplete and autofill
-                                         }) }))) }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "address_state", name: "address_state", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.state", defaultMessage: "ui.userBillingInfo.state" }), onChange: handleChange('address_state'), value: state.address_state, error: Boolean(state.addressStateError), helperText: state.addressStateError, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.postalCode", defaultMessage: "ui.userBillingInfo.postalCode" }), onChange: handleChange('address_postal_code'), value: state.address_postal_code, error: Boolean(state.addressPostalCodeError), helperText: state.addressPostalCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "address_city", name: "address_city", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.city", defaultMessage: "ui.userBillingInfo.city" }), onChange: handleChange('address_city'), value: state.address_city, error: Boolean(state.addressCityError), helperText: state.addressCityError, InputProps: {
-                                        startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "public" }) })))
-                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "phone", name: "phone", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.phone", defaultMessage: "ui.userBillingInfo.phone" }), onChange: handleChange('phone'), value: state.phone, error: Boolean(state.phoneError), helperText: state.phoneError, InputProps: {
-                                        startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "person" }) })))
-                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCode", defaultMessage: "ui.userBillingInfo.taxCode" }), onChange: handleChange('tax_code'), value: state.tax_code, error: Boolean(state.taxCodeError), helperText: state.taxCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsx(FormGroup, { children: _jsx(FormControlLabel, { disabled: Boolean(disableButtons), control: _jsx(Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: classNames({
+                                    }, renderInput: (params) => (_jsx(TextField, Object.assign({}, params, { label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.country", defaultMessage: "ui.userBillingInfo.country" }), fullWidth: true, id: "address_country", name: "address_country", error: Boolean(state.addressCountryError), slotProps: {
+                                            input: Object.assign(Object.assign({}, params.InputProps), (state.address_country && {
+                                                startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx("img", { loading: "lazy", width: "20", srcSet: `https://flagcdn.com/w40/${state.address_country.code.toLowerCase()}.png 2x`, src: `https://flagcdn.com/w20/${state.address_country.code.toLowerCase()}.png`, alt: "" }) })))
+                                            })),
+                                            htmlInput: Object.assign(Object.assign({}, params.inputProps), { autoComplete: 'new-password' // disable autocomplete and autofill
+                                             })
+                                        } }))) }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_state", name: "address_state", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.state", defaultMessage: "ui.userBillingInfo.state" }), onChange: handleChange('address_state'), value: state.address_state, error: Boolean(state.addressStateError), helperText: state.addressStateError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.postalCode", defaultMessage: "ui.userBillingInfo.postalCode" }), onChange: handleChange('address_postal_code'), value: state.address_postal_code, error: Boolean(state.addressPostalCodeError), helperText: state.addressPostalCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "address_city", name: "address_city", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.city", defaultMessage: "ui.userBillingInfo.city" }), onChange: handleChange('address_city'), value: state.address_city, error: Boolean(state.addressCityError), helperText: state.addressCityError, slotProps: {
+                                        input: {
+                                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "public" }) })))
+                                        }
+                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "phone", name: "phone", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.phone", defaultMessage: "ui.userBillingInfo.phone" }), onChange: handleChange('phone'), value: state.phone, error: Boolean(state.phoneError), helperText: state.phoneError, slotProps: {
+                                        input: {
+                                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "person" }) })))
+                                        }
+                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCode", defaultMessage: "ui.userBillingInfo.taxCode" }), onChange: handleChange('tax_code'), value: state.tax_code, error: Boolean(state.taxCodeError), helperText: state.taxCodeError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(FormGroup, { children: _jsx(FormControlLabel, { disabled: Boolean(disableButtons), control: _jsx(Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: classNames({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }), onChange: handleSetBusiness })), label: _jsx("span", Object.assign({ className: classNames({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }) }, { children: intl.formatMessage({
                                                 id: 'component.billingInfo.accountBusiness',
                                                 defaultMessage: 'component.billingInfo.accountBusiness'
-                                            }) })) }) }) })), state.isBusiness && (_jsx(Grow, Object.assign({ in: state.isBusiness }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsxs(Grid, Object.assign({ container: true, spacing: 3 }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxId", defaultMessage: "ui.userBillingInfo.taxId" }), onChange: handleChange('tax_id_data'), value: state.tax_id_data ? state.tax_id_data.value : null, error: Boolean(state.taxIdDataError), helperText: `${state.taxIdDataError ? state.taxIdDataError : ''} ${state.address_country && state.address_country.code && VAT_EXAMPLE[state.address_country.code]
+                                            }) })) }) }) })), state.isBusiness && (_jsx(Grow, Object.assign({ in: state.isBusiness }, { children: _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsxs(Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxId", defaultMessage: "ui.userBillingInfo.taxId" }), onChange: handleChange('tax_id_data'), value: state.tax_id_data ? state.tax_id_data.value : null, error: Boolean(state.taxIdDataError), helperText: `${state.taxIdDataError ? state.taxIdDataError : ''} ${state.address_country && state.address_country.code && VAT_EXAMPLE[state.address_country.code]
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.requiredFormat',
                                                             defaultMessage: 'component.billingInfo.requiredFormat'
                                                         }) + VAT_EXAMPLE[state.address_country.code]
                                                         : ''}`, placeholder: state.address_country && state.address_country.code && VAT_EXAMPLE[state.address_country.code]
                                                         ? VAT_EXAMPLE[state.address_country.code]
-                                                        : '', InputProps: {
-                                                        endAdornment: state.taxIdVerificationStatus !== null && (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? (_jsx(Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? (_jsx(Tooltip, Object.assign({ id: "tooltip-warning", title: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: _jsx(Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : (_jsx(Tooltip, Object.assign({ id: "tooltip-warning", title: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: _jsx(Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
-                                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "sdi", name: "sdi", label: `${intl.formatMessage({ id: 'component.billingInfo.sdi', defaultMessage: 'component.billingInfo.sdi' })} ${((_a = state.address_country) === null || _a === void 0 ? void 0 : _a.code) === COUNTRY_CODES.IT
+                                                        : '', slotProps: {
+                                                        input: {
+                                                            endAdornment: state.taxIdVerificationStatus !== null && (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? (_jsx(Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? (_jsx(Tooltip, Object.assign({ id: "tooltip-warning", title: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: _jsx(Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : (_jsx(Tooltip, Object.assign({ id: "tooltip-warning", title: _jsx(FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: _jsx(Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
+                                                        }
+                                                    }, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "sdi", name: "sdi", label: `${intl.formatMessage({ id: 'component.billingInfo.sdi', defaultMessage: 'component.billingInfo.sdi' })} ${((_a = state.address_country) === null || _a === void 0 ? void 0 : _a.code) === COUNTRY_CODES.IT
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.field.optional',
                                                             defaultMessage: 'component.billingInfo.field.optional'
                                                         })
-                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: _jsx(TextField, { variant: "outlined", id: "pec", name: "pec", label: `${intl.formatMessage({ id: 'component.billingInfo.pec', defaultMessage: 'component.billingInfo.pec' })} ${((_b = state.address_country) === null || _b === void 0 ? void 0 : _b.code) === COUNTRY_CODES.IT
+                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), _jsx(Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: _jsx(TextField, { variant: "outlined", id: "pec", name: "pec", label: `${intl.formatMessage({ id: 'component.billingInfo.pec', defaultMessage: 'component.billingInfo.pec' })} ${((_b = state.address_country) === null || _b === void 0 ? void 0 : _b.code) === COUNTRY_CODES.IT
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.field.optional',
                                                             defaultMessage: 'component.billingInfo.field.optional'
                                                         })
-                                                        : ''}`, onChange: handleChange('pec'), value: state.pec, error: Boolean(state.pecError), helperText: state.pecError, InputProps: {
-                                                        type: 'email',
-                                                        startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "email" }) })))
-                                                    }, fullWidth: true }) }))] })) })) }))), state.error && (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsx(Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), _jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsxs(Typography, Object.assign({ align: "left" }, { children: [_jsx(LoadingButton, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
+                                                        : ''}`, onChange: handleChange('pec'), value: state.pec, error: Boolean(state.pecError), helperText: state.pecError, slotProps: {
+                                                        input: {
+                                                            type: 'email',
+                                                            startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start" }, { children: _jsx(Icon, { children: "email" }) })))
+                                                        }
+                                                    }, fullWidth: true }) }))] })) })) }))), state.error && (_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsxs(Typography, Object.assign({ align: "left" }, { children: [_jsx(Button, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: _jsx(FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
 };
 export default forwardRef(UserBillingInfo);

package/lib/esm/components/UserChangeAddressDialog/UserChangeAddressDialog.js

@@ -9,7 +9,6 @@ import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import BaseDialog from '../../shared/BaseDialog';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { LoadingButton } from '@mui/lab';
 import { AddressElement, Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { getDefaultAppearanceStyle, getDefaultLocale } from '../../utils/payment';
@@ -75,7 +74,7 @@ export default function UserChangeAddressDialog(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), title: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: 'outlined', onClick: handleClose }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), _jsx(LoadingButton, Object.assign({ loading: loading, disabled: loading, variant: 'contained', onClick: handleSave }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: _jsx(Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: _jsx(AddressElement, { onChange: handleChangeAddress, options: {
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className), title: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: _jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ variant: "outlined", onClick: handleClose }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), _jsx(Button, Object.assign({ loading: loading, disabled: loading, variant: "contained", onClick: handleSave }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: _jsx(Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: _jsx(AddressElement, { onChange: handleChangeAddress, options: {
                     mode: 'billing',
                     defaultValues: addressState
                 } }) })) })));

package/lib/esm/components/UserCounters/UserCounters.js

@@ -16,7 +16,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS User Counters component. Learn about the available props and the CSS API.
@@ -91,23 +91,15 @@ export default function UserCounters(inProps) {
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(_Fragment, { children: (followEnabled || connectionEnabled) &&
                     (followEnabled ? (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.followings", defaultMessage: "ui.userCounters.followings", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.followings_counter,
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                     } }) })), _jsx(Bullet, {}), _jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.followers", defaultMessage: "ui.userCounters.followers", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.followers_counter,
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                     } }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.connections", defaultMessage: "ui.userCounters.connections", values: {
                                         count: scUser === null || scUser === void 0 ? void 0 : scUser.connections_counter,
-                                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                        // @ts-ignore
-                                        b: (chunks) => _jsx("strong", { children: chunks })
+                                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                                     } }) })), _jsx(Bullet, {})] }))) }), categoryFollowEnabled && (_jsx(Button, Object.assign({ className: classes.button, variant: "text", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_CATEGORIES_ROUTE_NAME, scUser) }, { children: _jsx(FormattedMessage, { id: "ui.userCounters.categories", defaultMessage: "ui.userCounters.categories", values: {
                         count: scUser === null || scUser === void 0 ? void 0 : scUser.categories_counter,
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        b: (chunks) => _jsx("strong", { children: chunks })
+                        b: (chunks) => _jsx("strong", { children: chunks }, Math.random())
                     } }) })))] })));
 }

package/lib/esm/components/UserInfo/UserInfo.js

@@ -120,7 +120,7 @@ export default function UserInfo(inProps) {
             case SCUserProfileFields.DATE_OF_BIRTH:
                 return `${intl.formatDate(user[field], { year: 'numeric', month: 'numeric', day: 'numeric' })}`;
             case SCUserProfileFields.TAGS:
-                return (_jsx(Tags, { tags: user.tags.filter((t) => t.visible), type: TagsComponentType.LIST, direction: 'row', TagChipProps: { clickable: false, disposable: false } }));
+                return (_jsx(Tags, { tags: user.tags.filter((t) => t.visible), type: TagsComponentType.LIST, direction: "row", TagChipProps: { clickable: false, disposable: false } }));
             case SCUserProfileFields.WEBSITE:
                 return (_jsx("a", Object.assign({ href: user[field], target: '_blank' }, { children: user[field] })));
             default:

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

@@ -18,4 +18,4 @@ export interface UserInfoDialogProps extends Pick<BaseDialogProps, Exclude<keyof
      */
     [p: string]: any;
 }
-export default function UserInfoDialog(inProps: UserInfoDialogProps): JSX.Element;
+export default function UserInfoDialog(inProps: UserInfoDialogProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/components/UserLiveStreamWidget/Skeleton.d.ts

@@ -1,2 +1,2 @@
 import 'swiper/css';
-export default function UserLiveStreamWidgetSkeleton(): JSX.Element;
+export default function UserLiveStreamWidgetSkeleton(): import("react/jsx-runtime").JSX.Element;

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

@@ -44,4 +44,4 @@ export interface UserLiveStreamWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function UserLiveStreamWidget(inProps: UserLiveStreamWidgetProps): JSX.Element;
+export default function UserLiveStreamWidget(inProps: UserLiveStreamWidgetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
 import UserLiveStreamWidget, { UserLiveStreamWidgetProps } from './UserLiveStreamWidget';
 import UserLiveStreamWidgetSkeleton from './Skeleton';
 export default UserLiveStreamWidget;
-export { UserLiveStreamWidgetSkeleton, type UserLiveStreamWidgetProps };
+export { UserLiveStreamWidgetSkeleton, UserLiveStreamWidgetProps };

package/lib/esm/components/UserPaymentMethods/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ForwardRefRenderFunction } from 'react';
 export interface UserPaymentMethodsSkeletonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -10,6 +10,27 @@ export interface UserPaymentMethodsSkeletonProps {
      */
     showBillingAddress?: boolean;
 }
-export declare type UserPaymentMethodsSkeletonRef = {};
-declare const _default: React.ForwardRefExoticComponent<UserPaymentMethodsSkeletonProps & React.RefAttributes<UserPaymentMethodsSkeletonRef>>;
-export default _default;
+export type UserPaymentMethodsSkeletonRef = {};
+/**
+ * > API documentation for the Community-JS User Payment Methods Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserPaymentMethodsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserPaymentMethodsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+declare const UserPaymentMethodsSkeleton: ForwardRefRenderFunction<UserPaymentMethodsSkeletonRef, UserPaymentMethodsSkeletonProps>;
+export default UserPaymentMethodsSkeleton;

package/lib/esm/components/UserPaymentMethods/Skeleton.js

@@ -1,6 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Box, TableCell, TableRow, Skeleton, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import { useThemeProps } from '@mui/system';
@@ -33,9 +32,8 @@ const Root = styled(Box, {
  |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
  *
  * @param inProps
- * @param ref
  */
-const UserPaymentMethodsSkeleton = (inProps, ref) => {
+const UserPaymentMethodsSkeleton = (inProps) => {
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -44,4 +42,4 @@ const UserPaymentMethodsSkeleton = (inProps, ref) => {
     const { className = null, showBillingAddress = false } = props, rest = __rest(props, ["className", "showBillingAddress"]);
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 200 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 50 }) })), showBillingAddress && (_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 150 }) }))), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "rectangular", width: 25, height: 25 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "rounded", width: 105, height: 35 }) }))] }) })));
 };
-export default forwardRef(UserPaymentMethodsSkeleton);
+export default UserPaymentMethodsSkeleton;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ForwardRefRenderFunction } from 'react';
 export interface UserPaymentMethodsProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -14,6 +14,28 @@ export interface UserPaymentMethodsProps {
      */
     [p: string]: any;
 }
-export declare type UserPaymentMethodsRef = {};
-declare const _default: React.ForwardRefExoticComponent<Pick<UserPaymentMethodsProps, keyof UserPaymentMethodsProps> & React.RefAttributes<UserPaymentMethodsRef>>;
-export default _default;
+export type UserPaymentMethodsRef = {};
+/**
+ * > API documentation for the Community-JS User Payment Methods. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserPaymentMethods} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserPaymentMethods` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserPaymentMethods-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+declare const UserPaymentMethods: ForwardRefRenderFunction<UserPaymentMethodsRef, UserPaymentMethodsProps>;
+export default UserPaymentMethods;

package/lib/esm/components/UserPaymentMethods/UserPaymentMethods.js

@@ -1,13 +1,13 @@
-import { __awaiter, __rest } from "tslib";
+import { __awaiter } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Button, Checkbox, CircularProgress, Icon, IconButton, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, styled } from '@mui/material';
 import { PaymentIcon } from 'react-svg-credit-card-payment-icons';
 import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
 import UserPaymentMethodsSkeleton from './Skeleton';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { useInView } from 'react-intersection-observer';
 import { useSnackbar } from 'notistack';
 import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
@@ -45,13 +45,13 @@ const Root = styled(Box, {
 
  * @param inProps
  */
-const UserPaymentMethods = (inProps, ref) => {
+const UserPaymentMethods = (inProps) => {
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { className = null, showBillingAddress = false } = props, rest = __rest(props, ["className", "showBillingAddress"]);
+    const { className = null, showBillingAddress = false } = props;
     // CONTEXT
     const scUserContext = useSCUser();
     // STATE
@@ -70,7 +70,6 @@ const UserPaymentMethods = (inProps, ref) => {
     const [addPaymentMethodDialogOpen, setAddPaymentMethodDialogOpen] = useState(false);
     // HOOKS
     const { isPaymentsEnabled } = useSCPaymentsEnabled();
-    const intl = useIntl();
     const { inView } = useInView({ triggerOnce: false });
     const { enqueueSnackbar } = useSnackbar();
     /**
@@ -79,8 +78,8 @@ const UserPaymentMethods = (inProps, ref) => {
     const loadMore = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         // eslint-disable-next-line @typescript-eslint/require-await
         const loadItems = () => __awaiter(void 0, void 0, void 0, function* () {
-            const startingAfterId = paymentMethods.length ? paymentMethods[paymentMethods.length - 1].id : null;
-            /* getAccountCustomerPaymentMethod(startingAfterId).then((res) => {
+            /* const startingAfterId = paymentMethods.length ? paymentMethods[paymentMethods.length - 1].id : null;
+            getAccountCustomerPaymentMethod(startingAfterId).then((res) => {
               setHasMore(res.paymentMethods.has_more);
               setPaymentMethods(paymentMethods.concat(res.paymentMethods.data));
               setIsLoadingPage(false);
@@ -328,9 +327,9 @@ const UserPaymentMethods = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classes.root }, { children: isLoading ? (_jsx(UserPaymentMethodsSkeleton, {})) : (_jsxs(_Fragment, { children: [_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "baseline" }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.headline }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.myPaymentMethods", defaultMessage: "ui.userPaymentMethods.myPaymentMethods" }) })), paymentMethods.length > 0 && (_jsx(Button, Object.assign({ size: "small", variant: 'outlined', onClick: handleOpenAddPaymentMethodDialog }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) })))] })), paymentMethods.length > 0 ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: Paper }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.typeMethod", defaultMessage: "ui.userPaymentMethods.typeMethod" }) }), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.brand", defaultMessage: "ui.userPaymentMethods.brand" }) }), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.expiration", defaultMessage: "ui.userPaymentMethods.expiration" }) }), showBillingAddress && (_jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.billingDetails", defaultMessage: "ui.userPaymentMethods.billingDetails" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.default", defaultMessage: "ui.userPaymentMethods.default" }) }), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.actions", defaultMessage: "ui.userPaymentMethods.actions" }) })] }) }), _jsxs(TableBody, { children: [paymentMethods.map((method, index) => {
+    return (_jsx(Root, Object.assign({ className: classes.root }, { children: isLoading ? (_jsx(UserPaymentMethodsSkeleton, {})) : (_jsxs(_Fragment, { children: [_jsxs(Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "baseline" }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.headline }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.myPaymentMethods", defaultMessage: "ui.userPaymentMethods.myPaymentMethods" }) })), paymentMethods.length > 0 && (_jsx(Button, Object.assign({ size: "small", variant: "outlined", onClick: handleOpenAddPaymentMethodDialog }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) })))] })), paymentMethods.length > 0 ? (_jsx(TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: Paper }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.typeMethod", defaultMessage: "ui.userPaymentMethods.typeMethod" }) }), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.brand", defaultMessage: "ui.userPaymentMethods.brand" }) }), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.expiration", defaultMessage: "ui.userPaymentMethods.expiration" }) }), showBillingAddress && (_jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.billingDetails", defaultMessage: "ui.userPaymentMethods.billingDetails" }) })), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.default", defaultMessage: "ui.userPaymentMethods.default" }) }), _jsx(TableCell, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.actions", defaultMessage: "ui.userPaymentMethods.actions" }) })] }) }), _jsxs(TableBody, { children: [paymentMethods.map((method, index) => {
                                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                                        return (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && (_jsxs(_Fragment, { children: [_jsx(PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), _jsxs(Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), _jsxs(TableCell, Object.assign({ scope: "row" }, { children: [(_c = method.card) === null || _c === void 0 ? void 0 : _c.exp_month, "/", (_d = method.card) === null || _d === void 0 ? void 0 : _d.exp_year] })), showBillingAddress && (_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: method.billing_details.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [(_f = (_e = method.billing_details) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.line1, _jsx("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [(_k = (_j = method.billing_details) === null || _j === void 0 ? void 0 : _j.address) === null || _k === void 0 ? void 0 : _k.postal_code, " - ", (_m = (_l = method.billing_details) === null || _l === void 0 ? void 0 : _l.address) === null || _m === void 0 ? void 0 : _m.city, " -", ' ', (_p = (_o = method.billing_details) === null || _o === void 0 ? void 0 : _o.address) === null || _p === void 0 ? void 0 : _p.country] }))] }), _jsx(IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: _jsx(Icon, { children: "edit" }) }))] })) }))), _jsx(TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? (_jsx(CircularProgress, { size: 20 })) : (_jsxs(_Fragment, { children: [method.id === defaultPaymentMethodId, _jsx(Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Button, Object.assign({ variant: 'contained', onClick: () => handleDelete(method.id) }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
-                                    }), hasMore && _jsx(UserPaymentMethodsSkeleton, {})] })] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", mb: 2 }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), _jsx(Button, Object.assign({ size: "small", variant: 'contained', onClick: handleOpenAddPaymentMethodDialog }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && (_jsx(ConfirmDialog, { open: openDeleteDialog, title: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && (_jsx(UserChangeAddressDialog, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && _jsx(UserAddPaymentMethodDialog, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
+                                        return (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && (_jsxs(_Fragment, { children: [_jsx(PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), _jsxs(Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), _jsxs(TableCell, Object.assign({ scope: "row" }, { children: [(_c = method.card) === null || _c === void 0 ? void 0 : _c.exp_month, "/", (_d = method.card) === null || _d === void 0 ? void 0 : _d.exp_year] })), showBillingAddress && (_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: "body1" }, { children: method.billing_details.name })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [(_f = (_e = method.billing_details) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.line1, _jsx("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), _jsxs(Typography, Object.assign({ variant: "body1" }, { children: [(_k = (_j = method.billing_details) === null || _j === void 0 ? void 0 : _j.address) === null || _k === void 0 ? void 0 : _k.postal_code, " - ", (_m = (_l = method.billing_details) === null || _l === void 0 ? void 0 : _l.address) === null || _m === void 0 ? void 0 : _m.city, " -", ' ', (_p = (_o = method.billing_details) === null || _o === void 0 ? void 0 : _o.address) === null || _p === void 0 ? void 0 : _p.country] }))] }), _jsx(IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: _jsx(Icon, { children: "edit" }) }))] })) }))), _jsx(TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? (_jsx(CircularProgress, { size: 20 })) : (_jsxs(_Fragment, { children: [method.id === defaultPaymentMethodId, _jsx(Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Button, Object.assign({ variant: "contained", onClick: () => handleDelete(method.id) }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
+                                    }), hasMore && _jsx(UserPaymentMethodsSkeleton, {})] })] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", mb: 2 }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), _jsx(Button, Object.assign({ size: "small", variant: "contained", onClick: handleOpenAddPaymentMethodDialog }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && (_jsx(ConfirmDialog, { open: openDeleteDialog, title: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && (_jsx(UserChangeAddressDialog, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && _jsx(UserAddPaymentMethodDialog, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
 };
-export default forwardRef(UserPaymentMethods);
+export default UserPaymentMethods;

package/lib/esm/components/UserProfileBlocked/UserProfileBlocked.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Box, Divider, Typography, styled } from '@mui/material';
+import { Box, Button, Divider, Typography, styled } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { useSCFetchUser, useSCFetchUserBlockedBy, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-import { LoadingButton } from '@mui/lab';
 import { useSnackbar } from 'notistack';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
@@ -77,5 +76,5 @@ export default function UserProfileBlocked(inProps) {
     if (!scUser || !scUserContext.user || loadingBlockedBy) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Divider, {}), !isMe && blockedBy && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Divider, {}), !isMe && blockedBy && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.info }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), _jsx(Button, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: _jsx(FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
 }