@selfcommunity/react-ui 0.11.0-alpha.7 → 0.11.0-alpha.71

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

@@ -0,0 +1,492 @@
+"use strict";
+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 utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const react_intl_1 = require("react-intl");
+const Billing_1 = require("../../constants/Billing");
+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");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    label: `${constants_1.PREFIX}-label`,
+    textBox: `${constants_1.PREFIX}-textbox`,
+    error: `${constants_1.PREFIX}-error`
+};
+const Root = (0, material_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(({ theme }) => ({
+    [`& .${classes.label}`]: {
+        fontSize: '18px',
+        color: 'rgb(48, 49, 61)'
+    },
+    [`& .${classes.error}`]: {
+        color: theme.palette.secondary.main
+    }
+}));
+/**
+ * > API documentation for the Community-JS UserBillingInfo. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserBillingInfo} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserBillingInfo` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserBillingInfo-root|Styles applied to the root element.|
+
+ * @param inProps
+ * @param ref
+ */
+const UserBillingInfo = (inProps, ref) => {
+    var _a, _b;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { id = constants_1.PREFIX, className, buttonLabel = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userBillingInfo.save", defaultMessage: "ui.userBillingInfo.save" }), mode = Billing_1.UserBillingInfoMode.EDIT, onLoad, onSave, onError, inlineDisplay = false, onChange, onBack, onChangeViewMode, disableButtons = false } = props, rest = tslib_1.__rest(props, ["id", "className", "buttonLabel", "mode", "onLoad", "onSave", "onError", "inlineDisplay", "onChange", "onBack", "onChangeViewMode", "disableButtons"]);
+    // CONTEXT
+    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)();
+    // HOOKS
+    const { isPaymentsEnabled } = (0, react_core_1.useSCPaymentsEnabled)();
+    const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const intl = (0, react_intl_1.useIntl)();
+    // REFS
+    const componentRef = (0, react_1.useRef)(null);
+    const getStripeAccountData = () => {
+        var _a;
+        const _state = { name: '', address: {}, phone: '', metadata: {} };
+        _state.name = (state.name || '').trim();
+        _state.phone = (state.phone || '').trim();
+        _state.address.city = (state.address_city || '').trim();
+        _state.address.country = (((_a = state.address_country) === null || _a === void 0 ? void 0 : _a.code) || '').trim();
+        _state.address.line1 = (state.address_line1 || '').trim();
+        _state.address.line2 = (state.address_line2 || '').trim();
+        _state.address.postal_code = (state.address_postal_code || '').trim();
+        _state.address.state = (state.address_state || '').trim();
+        _state.metadata.tax_code = (state.tax_code ? state.tax_code : '').trim();
+        _state.metadata.pec = (state.pec && state.isBusiness ? state.pec : '').trim();
+        _state.metadata.sdi = (state.sdi && state.isBusiness ? state.sdi : '').trim();
+        return _state;
+    };
+    const getAccountData = () => {
+        const _state = {};
+        _state.name = (state.name || '').trim();
+        _state.phone = (state.phone || '').trim();
+        _state.address_city = (state.address_city || '').trim();
+        _state.address_country = state.address_country;
+        _state.address_line1 = (state.address_line1 || '').trim();
+        _state.address_line2 = (state.address_line2 || '').trim();
+        _state.address_postal_code = (state.address_postal_code || '').trim();
+        _state.address_state = (state.address_state || '').trim();
+        _state.tax_code = (state.tax_code || '').trim();
+        _state.tax_id_data = state.tax_id_data;
+        _state.pec = (state.pec || '').trim();
+        _state.sdi = (state.sdi || '').trim();
+        return _state;
+    };
+    const isCustomerCompleted = (displayErrors = true, account = state) => {
+        var _a;
+        let _completed = true;
+        const _errors = {
+            nameError: '',
+            addressLine1Error: '',
+            addressPostalCodeError: '',
+            addressCityError: '',
+            addressStateError: '',
+            addressCountryError: '',
+            taxCodeError: '',
+            taxIdDataError: '',
+            error: ''
+        };
+        _completed = Boolean(account.name &&
+            account.address_line1 &&
+            account.address_postal_code &&
+            account.address_city &&
+            account.address_state &&
+            account.address_country &&
+            account.tax_code);
+        if (!_completed) {
+            if (!account.name) {
+                _errors[`nameError`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+            }
+            if (!account.address_line1) {
+                _errors[`addressLine1Error`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+            }
+            if (!account.address_postal_code) {
+                _errors[`addressPostalCodeError`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+            }
+            if (!account.address_city) {
+                _errors[`addressCityError`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+            }
+            if (!account.address_state) {
+                _errors[`addressStateError`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+            }
+            if (!account.address_country) {
+                _errors[`addressCountryError`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+            }
+            if (!account.tax_code && !account.isBusiness) {
+                _errors[`taxCodeError`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+            }
+        }
+        if (account.isBusiness) {
+            if (!account.tax_id_data || !account.tax_id_data.value) {
+                _errors[`taxIdDataError`] = intl.formatMessage({
+                    id: 'component.billingInfo.error',
+                    defaultMessage: 'component.billingInfo.error'
+                });
+                _completed = false;
+            }
+            if (((_a = account.address_country) === null || _a === void 0 ? void 0 : _a.code) === Country_1.COUNTRY_CODES.IT && !account.sdi && !account.pec) {
+                _errors[`sdiError`] = intl.formatMessage({
+                    id: 'component.billingInfo.sdiPecError',
+                    defaultMessage: 'component.billingInfo.sdiPecError'
+                });
+                _errors[`pecError`] = intl.formatMessage({
+                    id: 'component.billingInfo.sdiPecError',
+                    defaultMessage: 'component.billingInfo.sdiPecError'
+                });
+                _completed = false;
+            }
+            if (account.pec && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(account.pec)) {
+                _errors[`pecError`] = intl.formatMessage({
+                    id: 'component.billingInfo.pecError',
+                    defaultMessage: 'component.billingInfo.pecError'
+                });
+                _completed = false;
+            }
+        }
+        if (!_completed && displayErrors) {
+            dispatch({
+                type: reducer_1.actionTypes.SET_ERRORS,
+                payload: Object.assign(Object.assign({}, _errors), {
+                    error: intl.formatMessage({
+                        id: 'component.billingInfo.errors',
+                        defaultMessage: 'component.billingInfo.errors'
+                    })
+                })
+            });
+        }
+        else {
+            dispatch({ type: reducer_1.actionTypes.RESET_ERRORS });
+        }
+        return _completed;
+    };
+    const handleSaveAddress = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        return yield updateCustomerAddress(customer.id, getStripeAccountData());
+    });
+    const handleSaveTaxId = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        /* if (!state.isBusiness && state.initialData.isBusiness && state.tax_id_data && state.tax_id_data.id) {
+          return deleteCustomerTaxId(state.tax_id_data.id).then((response) => {
+            if (!response.error) {
+              dispatch({type: actionTypes.SET_DATA, payload: {tax_id_data: null, taxIdVerificationStatus: null}});
+            }
+            return Promise.resolve(response);
+          });
+        }
+        if (state.isBusiness && state.tax_id_data && state.tax_id_data.value && state.address_country) {
+          if (state.tax_id_data && state.tax_id_data.id) {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            return deleteCustomerTaxId(state.tax_id_data.id).then((response) => {
+              if (response.error || (response.taxId && !response.taxId.deleted)) {
+                return Promise.resolve(response);
+              }
+              // Reset taxId and verification
+              dispatch({type: actionTypes.SET_DATA, payload: {tax_id_data: null, taxIdVerificationStatus: null}});
+              return createCustomerTaxId({
+                type: state.address_country.taxType,
+                value: state.tax_id_data.value
+              }).then((res) => {
+                if (res) {
+                  console.log(res);
+                  dispatch({
+                    type: actionTypes.SET_DATA,
+                    payload: {
+                      tax_id_data: res.taxId,
+                      taxIdVerificationStatus: res.taxId?.verification?.status
+                    }
+                  });
+                  return Promise.resolve(res);
+                }
+              });
+            });
+          }
+    
+          return createCustomerTaxId({
+            type: state.address_country.taxType,
+            value: state.tax_id_data.value
+          }).then((res) => {
+            dispatch({
+              type: actionTypes.SET_DATA,
+              payload: {tax_id_data: res.taxId, taxIdVerificationStatus: res.taxId?.verification?.status}
+            });
+            return res;
+          });
+        } */
+        return Promise.resolve(() => ({}));
+    });
+    const handleChange = (name) => {
+        return function (event, value) {
+            let _value = event.target.value;
+            if (name === 'address_country') {
+                _value = value !== null && value !== void 0 ? value : null;
+            }
+            if (name === 'tax_id_data') {
+                _value = Object.assign(Object.assign({}, state.tax_id_data), { value: event.target.value });
+            }
+            const newState = { [`${name}`]: _value, [`${(0, utils_1.camelCase)(name)}Error`]: null };
+            if (name === 'tax_id_data') {
+                newState.taxIdVerificationStatus = null;
+            }
+            dispatch({ type: reducer_1.actionTypes.SET_DATA, payload: newState });
+            if (onChange) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                const account = getAccountData();
+                onChange(account);
+            }
+        };
+    };
+    const handleSubmit = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        dispatch({ type: reducer_1.actionTypes.RESET_ERRORS });
+        if (!state.isProcessing && isCustomerCompleted()) {
+            dispatch({ type: reducer_1.actionTypes.PROCESSING, payload: { isProcessing: true } });
+            const customer = yield handleSaveAddress();
+            if (!customer.error) {
+                dispatch({
+                    type: reducer_1.actionTypes.SET_INITIAL_DATA,
+                    payload: { initial_data: getAccountData(), initial_data_completed: true }
+                });
+                const taxId = yield handleSaveTaxId();
+                if (taxId.error) {
+                    console.log(taxId);
+                    onError && onError(taxId.error);
+                    dispatch({
+                        type: reducer_1.actionTypes.SET_ERRORS,
+                        payload: {
+                            taxIdDataError: intl.formatMessage({
+                                id: 'component.billingInfo.vatError',
+                                defaultMessage: 'component.billingInfo.vatError'
+                            })
+                        }
+                    });
+                    enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "pwa.common.error", defaultMessage: "pwa.common.error" }), {
+                        variant: 'error',
+                        autoHideDuration: 3000
+                    });
+                }
+                else {
+                    enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "pwa.common.success", defaultMessage: "pwa.common.success" }), {
+                        variant: 'success',
+                        autoHideDuration: 3000
+                    });
+                    if (onSave) {
+                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                        // @ts-ignore
+                        const account = getAccountData(state);
+                        if (mode) {
+                            dispatch({ type: reducer_1.actionTypes.SET_MODE, payload: { mode } });
+                        }
+                        onSave(account);
+                    }
+                }
+                dispatch({ type: reducer_1.actionTypes.PROCESSING, payload: { isProcessing: false } });
+            }
+            else {
+                console.log(customer.error);
+                onError && onError(customer.error);
+                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "pwa.common.error", defaultMessage: "pwa.common.error" }), {
+                    variant: 'error',
+                    autoHideDuration: 3000
+                });
+                dispatch({ type: reducer_1.actionTypes.PROCESSING, payload: { isProcessing: false } });
+            }
+            dispatch({ type: reducer_1.actionTypes.PROCESSING, payload: { isProcessing: false } });
+        }
+    });
+    const handleSetBusiness = (event) => {
+        dispatch({ type: reducer_1.actionTypes.SET_DATA, payload: { isBusiness: event.target.checked } });
+    };
+    const handleBack = () => {
+        dispatch({ type: reducer_1.actionTypes.RESET_DATA });
+        dispatch({ type: reducer_1.actionTypes.RESET_ERRORS });
+        handleChangeViewMode();
+        onBack && onBack();
+    };
+    const handleChangeViewMode = () => {
+        const _mode = state.mode === Billing_1.UserBillingInfoMode.READ ? Billing_1.UserBillingInfoMode.EDIT : Billing_1.UserBillingInfoMode.READ;
+        dispatch({ type: reducer_1.actionTypes.SET_MODE, payload: { mode: _mode } });
+        onChangeViewMode && onChangeViewMode(_mode);
+    };
+    (0, react_1.useEffect)(() => {
+        if (state.isLoading) {
+            /* getCustomer()
+              .then((resCustomer) => {
+                getAllCustomerTaxIds().then((resTaxIds) => {
+                  setCustomer(resCustomer.customer);
+                  const payload = {
+                    isLoading: false,
+                    name: resCustomer.customer.name,
+                    phone: resCustomer.customer.phone,
+                    ...(resCustomer.customer.address &&
+                      resCustomer.customer.address.line1 !== undefined && {
+                        address_line1: resCustomer.customer.address.line1
+                      }),
+                    ...(resCustomer.customer.address &&
+                      resCustomer.customer.address.line2 !== undefined && {
+                        address_line2: resCustomer.customer.address.line2
+                      }),
+                    ...(resCustomer.customer.address &&
+                      resCustomer.customer.address.postal_code !== undefined && {
+                        address_postal_code: resCustomer.customer.address.postal_code
+                      }),
+                    ...(resCustomer.customer.address &&
+                      resCustomer.customer.address.city !== undefined && {address_city: resCustomer.customer.address.city}),
+                    ...(resCustomer.customer.address &&
+                      resCustomer.customer.address.state !== undefined && {
+                        address_state: resCustomer.customer.address.state
+                      }),
+                    ...(resCustomer.customer.address &&
+                      resCustomer.customer.address.country !== undefined && {
+                        address_country: getCountryOption(resCustomer.customer.address.country)
+                      }),
+                    ...(resCustomer.customer.metadata.tax_code && {tax_code: resCustomer.customer.metadata.tax_code}),
+                    ...(resCustomer.customer.metadata.sdi && {sdi: resCustomer.customer.metadata.sdi}),
+                    ...(resCustomer.customer.metadata.pec && {pec: resCustomer.customer.metadata.pec}),
+                    isBusiness: false
+                  };
+                  if (resTaxIds.taxIds && resTaxIds.taxIds.data.length > 0) {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    payload['tax_id_data'] = resTaxIds.taxIds.data[0];
+                    payload['isBusiness'] = Boolean(resTaxIds.taxIds.data[0].value);
+                    payload['taxIdVerificationStatus'] = resTaxIds.taxIds.data[0].verification?.status;
+                  }
+                  const _completed = isCustomerCompleted(false, payload);
+                  payload['mode'] = _completed ? mode : UserBillingInfoMode.EDIT;
+                  dispatch({
+                    type: actionTypes.SET_INITIAL_DATA,
+                    payload: {initial_data: payload, initial_data_completed: _completed}
+                  });
+                  dispatch({type: actionTypes.SET_DATA, payload});
+                  onLoad && onLoad(getAccountData(), _completed);
+                });
+              })
+              .catch((e) => {
+                enqueueSnackbar(<FormattedMessage id="pwa.common.error" defaultMessage="pwa.common.error" />, {
+                  variant: 'error',
+                  autoHideDuration: 3000
+                });
+              }); */
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        dispatch({ type: reducer_1.actionTypes.SET_MODE, payload: { mode } });
+    }, [mode]);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        isBillingInfoCompleted: () => {
+            return isCustomerCompleted();
+        },
+        showError: (error) => {
+            dispatch({ type: reducer_1.actionTypes.SET_ERRORS, payload: { error } });
+        },
+        billingMode: () => {
+            return state.mode;
+        }
+    }));
+    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
+                                        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)({
+                                                [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]
+                                                        ? 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
+                                                        ? 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
+                                                        ? 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" }) })))] })) }))] })) })) })) }) })));
+};
+exports.default = (0, react_1.forwardRef)(UserBillingInfo);

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

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

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

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

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

@@ -0,0 +1,4 @@
+import UserBillingInfo, { UserBillingInfoProps } from './UserBillingInfo';
+import UserBillingInfoSkeleton from './Skeleton';
+export default UserBillingInfo;
+export { UserBillingInfoProps, UserBillingInfoSkeleton };

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserBillingInfoSkeleton = void 0;
+const tslib_1 = require("tslib");
+const UserBillingInfo_1 = tslib_1.__importDefault(require("./UserBillingInfo"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.UserBillingInfoSkeleton = Skeleton_1.default;
+exports.default = UserBillingInfo_1.default;

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

@@ -0,0 +1,77 @@
+export declare const actionTypes: {
+    LOADING: string;
+    SET_MODE: string;
+    SET_DATA: string;
+    RESET_DATA: string;
+    SET_ERRORS: string;
+    SET_INITIAL_DATA: string;
+    RESET_ERRORS: string;
+    PROCESSING: string;
+};
+export declare const initialState: {
+    initialData: any;
+    initialDataCompleted: boolean;
+    isLoading: boolean;
+    isProcessing: boolean;
+    isBusiness: boolean;
+    mode: any;
+    name: string;
+    phone: string;
+    address_line1: string;
+    address_line2: string;
+    address_postal_code: string;
+    address_city: string;
+    address_state: string;
+    address_country: any;
+    tax_code: string;
+    tax_id_data: any;
+    sdi: string;
+    pec: string;
+    error: any;
+    nameError: any;
+    addressLine1Error: any;
+    addressLine2Error: any;
+    addressPostalCodeError: any;
+    addressCityError: any;
+    addressStateError: any;
+    addressCountryError: any;
+    taxCodeError: any;
+    taxIdDataError: any;
+    sdiError: any;
+    pecError: any;
+    taxIdVerificationStatus: any;
+};
+export declare function getInitialState(data?: {}): {
+    initialData: {};
+    initialDataCompleted: boolean;
+    isLoading: boolean;
+    isProcessing: boolean;
+    isBusiness: boolean;
+    mode: any;
+    name: string;
+    phone: string;
+    address_line1: string;
+    address_line2: string;
+    address_postal_code: string;
+    address_city: string;
+    address_state: string;
+    address_country: any;
+    tax_code: string;
+    tax_id_data: any;
+    sdi: string;
+    pec: string;
+    error: any;
+    nameError: any;
+    addressLine1Error: any;
+    addressLine2Error: any;
+    addressPostalCodeError: any;
+    addressCityError: any;
+    addressStateError: any;
+    addressCountryError: any;
+    taxCodeError: any;
+    taxIdDataError: any;
+    sdiError: any;
+    pecError: any;
+    taxIdVerificationStatus: any;
+};
+export declare function reducer(state: any, action: any): any;