@selfcommunity/react-ui 0.11.0-react-17.0.1.3 → 1.0.0-alpha.1

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

@@ -14,7 +14,6 @@ const reducer_1 = require("./reducer");
 const Country_1 = require("../../constants/Country");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Grow_1 = tslib_1.__importDefault(require("@mui/material/Grow"));
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 // import {getCountryOption} from '../../utils/address';
 const react_core_1 = require("@selfcommunity/react-core");
@@ -71,7 +70,7 @@ const UserBillingInfo = (inProps, ref) => {
     const scUserContext = (0, react_core_1.useSCUser)();
     // STATE
     const [state, dispatch] = (0, react_1.useReducer)(reducer_1.reducer, (0, reducer_1.getInitialState)({ mode }));
-    const [customer, setCustomer] = (0, react_1.useState)();
+    const [customer] = (0, react_1.useState)();
     // HOOKS
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
@@ -446,47 +445,56 @@ const UserBillingInfo = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id }, rest, { ref: componentRef }, { children: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { mode: mode })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.mode === Billing_1.UserBillingInfoMode.READ ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.name ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [state.address_line1, (0, jsx_runtime_1.jsx)("br", {}), state.address_line2] })), (0, jsx_runtime_1.jsxs)(material_1.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) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: state.tax_code })), state.isBusiness && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.tax_id_data && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["SDI: ", state.sdi] })), state.pec && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: ["PEC: ", state.pec] }))] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: 'contained', size: 'small', disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (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: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "name", name: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: "country-select-demo", options: Country_1.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 ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), id: id }, rest, { ref: componentRef }, { children: (0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { mode: mode })) : ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: state.mode === Billing_1.UserBillingInfoMode.READ ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.name ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: state.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: [state.address_line1, (0, jsx_runtime_1.jsx)("br", {}), state.address_line2] })), (0, jsx_runtime_1.jsxs)(material_1.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) && (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: state.tax_code })), state.isBusiness && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [state.tax_id_data && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: ["VAT: ", state.tax_id_data.value] })), state.sdi && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: ["SDI: ", state.sdi] })), state.pec && (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body1" }, { children: ["PEC: ", state.pec] }))] }))] })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.noInfo", defaultMessage: "ui.userBillingInfo.noInfo" }) }))), state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ sx: { mt: 1 }, variant: "contained", size: "small", disabled: Boolean(disableButtons), onClick: handleChangeViewMode }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "component.CheckoutForm.billingInfoChangeButton", defaultMessage: "component.CheckoutForm.billingInfoChangeButton" }) })))] })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "name", name: "name", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.name", defaultMessage: "ui.userBillingInfo.name" }), onChange: handleChange('name'), value: state.name, error: Boolean(state.nameError), helperText: state.nameError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line1", name: "address_line1", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_line2", name: "address_line2", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.Autocomplete, { id: "country-select-demo", options: Country_1.countries, value: state.address_country, fullWidth: true, onChange: handleChange('address_country'), getOptionLabel: (option) => option.label, renderOption: (props, option) => {
                                         const { key } = props, rest = tslib_1.__rest(props, ["key"]);
                                         return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li", sx: { '& > img': { mr: 2, flexShrink: 0 } } }, rest, { children: [(0, jsx_runtime_1.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) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.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
-                                         }) }))) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_state", name: "address_state", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_city", name: "address_city", label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }) })))
-                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "phone", name: "phone", label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.phone", defaultMessage: "ui.userBillingInfo.phone" }), onChange: handleChange('phone'), value: state.phone, error: Boolean(state.phoneError), helperText: state.phoneError, InputProps: {
-                                        startAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "person" }) })))
-                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: Boolean(disableButtons), control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: (0, classnames_1.default)({
+                                    }, renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.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
+                                             })
+                                        } }))) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_state", name: "address_state", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_postal_code", name: "address_postal_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "address_city", name: "address_city", label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }) })))
+                                        }
+                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "phone", name: "phone", label: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "person" }) })))
+                                        }
+                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_code", name: "tax_code", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { disabled: Boolean(disableButtons), control: (0, jsx_runtime_1.jsx)(material_1.Checkbox, Object.assign({ checked: state.isBusiness }, ((state.taxIdDataError || state.sdiError || state.pecError) && { color: 'secondary' }), { className: (0, classnames_1.default)({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }), onChange: handleSetBusiness })), label: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, classnames_1.default)({
                                                 [classes.error]: state.taxIdDataError || state.sdiError || state.pecError
                                             }) }, { children: intl.formatMessage({
                                                 id: 'component.billingInfo.accountBusiness',
                                                 defaultMessage: 'component.billingInfo.accountBusiness'
-                                            }) })) }) }) })), state.isBusiness && ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: state.isBusiness }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (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: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 && Billing_1.VAT_EXAMPLE[state.address_country.code]
+                                            }) })) }) }) })), state.isBusiness && ((0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: state.isBusiness }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: 3 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { variant: "outlined", id: "tax_id_data", name: "tax_id_data", label: (0, jsx_runtime_1.jsx)(react_intl_1.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 && Billing_1.VAT_EXAMPLE[state.address_country.code]
                                                         ? intl.formatMessage({
                                                             id: 'component.billingInfo.requiredFormat',
                                                             defaultMessage: 'component.billingInfo.requiredFormat'
                                                         }) + Billing_1.VAT_EXAMPLE[state.address_country.code]
                                                         : ''}`, placeholder: state.address_country && state.address_country.code && Billing_1.VAT_EXAMPLE[state.address_country.code]
                                                         ? Billing_1.VAT_EXAMPLE[state.address_country.code]
-                                                        : '', InputProps: {
-                                                        endAdornment: state.taxIdVerificationStatus !== null && ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
-                                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.COUNTRY_CODES.IT
+                                                        : '', slotProps: {
+                                                        input: {
+                                                            endAdornment: state.taxIdVerificationStatus !== null && ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: state.taxIdVerificationStatus === 'verified' ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "primary" }, { children: "done" }))) : state.taxIdVerificationStatus === 'pending' ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckPending", defaultMessage: "ui.userBillingInfo.taxCheckPending" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ id: "tooltip-warning", title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.taxCheckWarning", defaultMessage: "ui.userBillingInfo.taxCheckWarning" }), enterDelay: 300, leaveDelay: 300, placement: "top" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "warning" }, { children: "help" })) }))) })))
+                                                        }
+                                                    }, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.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 }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: inlineDisplay ? 12 : 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.COUNTRY_CODES.IT
+                                                        : ''}`, onChange: handleChange('sdi'), value: state.sdi, error: Boolean(state.sdiError), helperText: state.sdiError, fullWidth: true }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { xs: 12, sm: inlineDisplay ? 12 : 6 } }, { children: (0, jsx_runtime_1.jsx)(material_1.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_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })))
-                                                    }, fullWidth: true }) }))] })) })) }))), state.error && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ align: "left" }, { children: [(0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "email" }) })))
+                                                        }
+                                                    }, fullWidth: true }) }))] })) })) }))), state.error && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "left", color: "secondary" }, { children: state.error })) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ align: "left" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", disabled: state.isProcessing || Boolean(disableButtons), loading: state.isProcessing, onClick: handleSubmit }, { children: buttonLabel })), onBack && state.initialDataCompleted && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleBack, disabled: Boolean(disableButtons) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.back", defaultMessage: "ui.userBillingInfo.back" }) })))] })) }))] })) })) })) }) })));
 };
 exports.default = (0, react_1.forwardRef)(UserBillingInfo);

package/lib/cjs/components/UserChangeAddressDialog/UserChangeAddressDialog.js

@@ -11,7 +11,6 @@ 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 lab_1 = require("@mui/lab");
 const react_stripe_js_1 = require("@stripe/react-stripe-js");
 const stripe_js_1 = require("@stripe/stripe-js");
 const payment_1 = require("../../utils/payment");
@@ -77,7 +76,7 @@ function UserChangeAddressDialog(inProps) {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: 'outlined', onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: loading, disabled: loading, variant: 'contained', onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: handleChangeAddress, options: {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.title", id: "component.userChangeAddressDialog.title" }), open: open, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnClose", id: "component.userChangeAddressDialog.btnClose" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ loading: loading, disabled: loading, variant: "contained", onClick: handleSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.userChangeAddressDialog.btnSave", id: "component.userChangeAddressDialog.btnSave" }) }))] }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.Elements, Object.assign({ stripe: stripePromise, options: elementsOptions }, { children: (0, jsx_runtime_1.jsx)(react_stripe_js_1.AddressElement, { onChange: handleChangeAddress, options: {
                     mode: 'billing',
                     defaultValues: addressState
                 } }) })) })));

package/lib/cjs/components/UserCounters/UserCounters.js

@@ -18,7 +18,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.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.
@@ -93,24 +93,16 @@ function UserCounters(inProps) {
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (followEnabled || connectionEnabled) &&
                     (followEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWINGS_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
                                     } }) })), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_FOLLOWERS_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
                                     } }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CONNECTIONS_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
                                     } }) })), (0, jsx_runtime_1.jsx)(Bullet_1.default, {})] }))) }), categoryFollowEnabled && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.button, variant: "text", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_CATEGORIES_ROUTE_NAME, scUser) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                        b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }, Math.random())
                     } }) })))] })));
 }
 exports.default = UserCounters;

package/lib/cjs/components/UserInfo/UserInfo.js

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

package/lib/cjs/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/cjs/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.
@@ -11,5 +11,26 @@ export interface UserPaymentMethodsSkeletonProps {
     showBillingAddress?: boolean;
 }
 export type UserPaymentMethodsSkeletonRef = {};
-declare const _default: React.ForwardRefExoticComponent<UserPaymentMethodsSkeletonProps & React.RefAttributes<UserPaymentMethodsSkeletonRef>>;
-export default _default;
+/**
+ * > 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/cjs/components/UserPaymentMethods/Skeleton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const system_1 = require("@mui/system");
@@ -35,9 +34,8 @@ const Root = (0, material_1.styled)(material_1.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 = (0, system_1.useThemeProps)({
         props: inProps,
@@ -46,4 +44,4 @@ const UserPaymentMethodsSkeleton = (inProps, ref) => {
     const { className = null, showBillingAddress = false } = props, rest = tslib_1.__rest(props, ["className", "showBillingAddress"]);
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 200 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 50 }) })), showBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 150 }) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 25, height: 25 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 105, height: 35 }) }))] }) })));
 };
-exports.default = (0, react_1.forwardRef)(UserPaymentMethodsSkeleton);
+exports.default = UserPaymentMethodsSkeleton;

package/lib/cjs/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.
@@ -15,5 +15,27 @@ export interface UserPaymentMethodsProps {
     [p: string]: any;
 }
 export type UserPaymentMethodsRef = {};
-declare const _default: React.ForwardRefExoticComponent<Omit<UserPaymentMethodsProps, "ref"> & React.RefAttributes<UserPaymentMethodsRef>>;
-export default _default;
+/**
+ * > 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/cjs/components/UserPaymentMethods/UserPaymentMethods.js

@@ -47,13 +47,13 @@ const Root = (0, material_1.styled)(material_1.Box, {
 
  * @param inProps
  */
-const UserPaymentMethods = (inProps, ref) => {
+const UserPaymentMethods = (inProps) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { className = null, showBillingAddress = false } = props, rest = tslib_1.__rest(props, ["className", "showBillingAddress"]);
+    const { className = null, showBillingAddress = false } = props;
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // STATE
@@ -72,7 +72,6 @@ const UserPaymentMethods = (inProps, ref) => {
     const [addPaymentMethodDialogOpen, setAddPaymentMethodDialogOpen] = (0, react_1.useState)(false);
     // HOOKS
     const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
-    const intl = (0, react_intl_1.useIntl)();
     const { inView } = (0, react_intersection_observer_1.useInView)({ triggerOnce: false });
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     /**
@@ -81,8 +80,8 @@ const UserPaymentMethods = (inProps, ref) => {
     const loadMore = (0, react_1.useCallback)(() => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         // eslint-disable-next-line @typescript-eslint/require-await
         const loadItems = () => tslib_1.__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);
@@ -330,9 +329,9 @@ const UserPaymentMethods = (inProps, ref) => {
     if (!isPaymentsEnabled || !scUserContext.user) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "baseline" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.headline }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.myPaymentMethods", defaultMessage: "ui.userPaymentMethods.myPaymentMethods" }) })), paymentMethods.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'outlined', onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) })))] })), paymentMethods.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: material_1.Paper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.typeMethod", defaultMessage: "ui.userPaymentMethods.typeMethod" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.brand", defaultMessage: "ui.userPaymentMethods.brand" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.expiration", defaultMessage: "ui.userPaymentMethods.expiration" }) }), showBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.billingDetails", defaultMessage: "ui.userPaymentMethods.billingDetails" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.default", defaultMessage: "ui.userPaymentMethods.default" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.actions", defaultMessage: "ui.userPaymentMethods.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [paymentMethods.map((method, index) => {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: isLoading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, {})) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "baseline" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.headline }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.myPaymentMethods", defaultMessage: "ui.userPaymentMethods.myPaymentMethods" }) })), paymentMethods.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) })))] })), paymentMethods.length > 0 ? ((0, jsx_runtime_1.jsx)(material_1.TableContainer, Object.assign({ style: { margin: 'auto', borderRadius: 0 }, component: material_1.Paper }, { children: (0, jsx_runtime_1.jsxs)(material_1.Table, Object.assign({ sx: { minWidth: 650 }, "aria-label": "simple table", stickyHeader: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.typeMethod", defaultMessage: "ui.userPaymentMethods.typeMethod" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.brand", defaultMessage: "ui.userPaymentMethods.brand" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.expiration", defaultMessage: "ui.userPaymentMethods.expiration" }) }), showBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.billingDetails", defaultMessage: "ui.userPaymentMethods.billingDetails" }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.default", defaultMessage: "ui.userPaymentMethods.default" }) }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.actions", defaultMessage: "ui.userPaymentMethods.actions" }) })] }) }), (0, jsx_runtime_1.jsxs)(material_1.TableBody, { children: [paymentMethods.map((method, index) => {
                                         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-                                        return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_svg_credit_card_payment_icons_1.PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), (0, jsx_runtime_1.jsxs)(material_1.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 && ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: method.billing_details.name })), (0, jsx_runtime_1.jsxs)(material_1.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, (0, jsx_runtime_1.jsx)("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), (0, jsx_runtime_1.jsxs)(material_1.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] }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))] })) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [method.id === defaultPaymentMethodId, (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: 'contained', onClick: () => handleDelete(method.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
-                                    }), hasMore && (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'contained', onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && ((0, jsx_runtime_1.jsx)(UserChangeAddressDialog_1.default, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && (0, jsx_runtime_1.jsx)(UserAddPaymentMethodDialog_1.default, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
+                                        return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_svg_credit_card_payment_icons_1.PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), (0, jsx_runtime_1.jsxs)(material_1.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 && ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: method.billing_details.name })), (0, jsx_runtime_1.jsxs)(material_1.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, (0, jsx_runtime_1.jsx)("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), (0, jsx_runtime_1.jsxs)(material_1.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] }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))] })) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [method.id === defaultPaymentMethodId, (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", onClick: () => handleDelete(method.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
+                                    }), hasMore && (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && ((0, jsx_runtime_1.jsx)(UserChangeAddressDialog_1.default, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && (0, jsx_runtime_1.jsx)(UserAddPaymentMethodDialog_1.default, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
 };
-exports.default = (0, react_1.forwardRef)(UserPaymentMethods);
+exports.default = UserPaymentMethods;

package/lib/cjs/components/UserProfileBlocked/UserProfileBlocked.js

@@ -8,7 +8,6 @@ const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
@@ -79,6 +78,6 @@ function UserProfileBlocked(inProps) {
     if (!scUser || !scUserContext.user || loadingBlockedBy) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), !isMe && blockedBy && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), !isMe && blockedBy && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUserBy", defaultMessage: "ui.userProfileBlocked.blockedUserBy" }) }))), !isMe && scUserContext.managers.blockedUsers.isBlocked(scUser) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.info }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.blockedUser", defaultMessage: "ui.userProfileBlocked.blockedUser" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: classes.button, loading: scUserContext.managers.blockedUsers.loading, disabled: scUserContext.managers.blockedUsers.loading, onClick: handleBlock }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileBlocked.unBlockUser", defaultMessage: "ui.userProfileBlocked.unBlockUser" }) }))] }))] })));
 }
 exports.default = UserProfileBlocked;

package/lib/cjs/components/UserProfileEdit/Section/AccountCredentials.js

@@ -12,7 +12,6 @@ const utils_1 = require("@selfcommunity/utils");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog"));
 const PasswordTextField_1 = tslib_1.__importDefault(require("../../../shared/PasswordTextField"));
 const EmailTextField_1 = tslib_1.__importDefault(require("../../../shared/EmailTextField"));
-const lab_1 = require("@mui/lab");
 const notistack_1 = require("notistack");
 const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
@@ -131,7 +130,7 @@ function AccountCredentials(props) {
         e.stopPropagation();
         setIsSubmitting(true);
         api_services_1.UserService.changeUserMail(user === null || user === void 0 ? void 0 : user.id, field.email, !skipEmailValidation, !skipEmailValidation)
-            .then((res) => {
+            .then(() => {
             setIsEditing(false);
             setIsSubmitting(false);
             if (skipEmailValidation) {
@@ -156,16 +155,20 @@ function AccountCredentials(props) {
     if (!user) {
         return;
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.email }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSubmitting ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EmailTextField_1.default, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
-                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))) : error.email ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "error" }, { children: "error" }))) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }))) })))
-                                } }) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.password }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && ((0, jsx_runtime_1.jsxs)(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
-                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) })))
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.email }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSubmitting ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EmailTextField_1.default, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), slotProps: {
+                                    input: {
+                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))) : error.email ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "error" }, { children: "error" }))) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }))) })))
+                                    }
+                                } }) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.password }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && ((0, jsx_runtime_1.jsxs)(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), slotProps: {
+                                    input: {
+                                        endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) })))
+                                    }
                                 } }), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: open, anchorEl: anchorEl, anchorOrigin: {
                                     vertical: 'center',
                                     horizontal: 'left'
                                 }, transformOrigin: {
                                     vertical: 'center',
                                     horizontal: 'right'
-                                }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
+                                }, onClose: handlePopoverClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span", sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword.info", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword.info" }) })) })) })), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "confirmPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.confirmPassword", defaultMessage: "ui.userProfileEditAccountCredentials.confirmPassword" }), size: "medium", value: field.confirmPassword, onChange: handleChange, onBlur: validateInput, error: Boolean(error.confirmPassword), helperText: error.confirmPassword })] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.confirmChangeButton, loading: isSubmittingPassword, disabled: !field.confirmPassword || Boolean(error.confirmPassword) || Boolean(error.password) || Boolean(error.newPassword), variant: "contained", onClick: handleSubmitPassword }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] })))] })));
 }
 exports.default = AccountCredentials;

package/lib/cjs/components/UserProfileEdit/Section/PublicInfo.js

@@ -18,9 +18,8 @@ const types_1 = require("../../../types");
 const MetadataField_1 = tslib_1.__importDefault(require("../../../shared/MetadataField"));
 const Errors_1 = require("../../../constants/Errors");
 const date_fns_1 = require("date-fns");
-const it_1 = tslib_1.__importDefault(require("date-fns/locale/it"));
-const en_US_1 = tslib_1.__importDefault(require("date-fns/locale/en-US"));
-const lab_1 = require("@mui/lab");
+const it_1 = require("date-fns/locale/it");
+const en_US_1 = require("date-fns/locale/en-US");
 const notistack_1 = require("notistack");
 const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
@@ -70,9 +69,7 @@ function PublicInfo(props) {
         return null;
     }, [scPreferences.preferences]);
     // STATE
-    const theme = (0, material_1.useTheme)();
-    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    const [user, setUser] = (0, react_1.useState)();
+    const [user, setUser] = (0, react_1.useState)(null);
     const [error, setError] = (0, react_1.useState)({});
     const [editing, setEditing] = (0, react_1.useState)([]);
     const [saving, setSaving] = (0, react_1.useState)([]);
@@ -159,10 +156,10 @@ function PublicInfo(props) {
             case types_1.SCUserProfileFields.DATE_JOINED:
                 return null;
             case types_1.SCUserProfileFields.DATE_OF_BIRTH:
-                return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.default : en_US_1.default }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: intl.formatMessage({
+                return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, Object.assign({ dateAdapter: AdapterDateFns_1.AdapterDateFns, adapterLocale: scContext.settings.locale.default === 'it' ? it_1.it : en_US_1.enUS }, { children: (0, jsx_runtime_1.jsx)(x_date_pickers_1.DatePicker, { label: intl.formatMessage({
                             id: `ui.userInfo.${(0, utils_1.camelCase)(field)}`,
                             defaultMessage: `ui.userInfo.${field}`
-                        }), defaultValue: user[field] ? (0, date_fns_1.parseISO)(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
+                        }), defaultValue: user[field] ? new Date(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
                             const u = user;
                             const field = types_1.SCUserProfileFields.DATE_OF_BIRTH;
                             const camelField = (0, utils_1.camelCase)(field);
@@ -184,13 +181,8 @@ function PublicInfo(props) {
                             }
                             setUser(u);
                             setEditing([...editing, field]);
-                        }, disableFuture: true, disabled: isSaving, slots: {
-                            inputAdornment: (params) => {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
-                                // @ts-ignore
-                                const _a = params.children.props, { children } = _a, rest = tslib_1.__rest(_a, ["children"]);
-                                return ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: 'end' }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({}, rest, { children: children })), isSaving && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 })] })));
-                            }
+                        }, disableFuture: true, disabled: isSaving, enableAccessibleFieldDOMStructure: false, slots: {
+                            openPickerButton: (params) => ((0, jsx_runtime_1.jsxs)(material_1.IconButton, Object.assign({}, params, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), isSaving && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 })] })))
                         }, 
                         // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
                         slotProps: {
@@ -198,10 +190,7 @@ function PublicInfo(props) {
                                 className: classes.field,
                                 fullWidth: true,
                                 variant: 'outlined',
-                                helperText: _error || null,
-                                InputProps: {
-                                    endAdornment: isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditing }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })), isSaving ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 }) : null] }))
-                                }
+                                helperText: _error || null
                             }
                         } }) }), field));
             case types_1.SCUserProfileFields.BIO:
@@ -233,6 +222,6 @@ function PublicInfo(props) {
     }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [startActions, _fields.map((field) => {
                 return renderField(field);
-            }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' }) })), endActions] })));
+            }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userInfo.button.save", defaultMessage: "ui.userInfo.button.save" }) })), endActions] })));
 }
 exports.default = PublicInfo;