@selfcommunity/react-ui/lib/esm/components/AccountChangeMailValidation/AccountChangeMailValidation.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useState } from 'react';
import { styled } from '@mui/material/styles';
import { useSCUser } from '@selfcommunity/react-core';
import { Alert, Box, CircularProgress } from '@mui/material';
import classNames from 'classnames';
import { useThemeProps } from '@mui/system';
import { UserService } from '@selfcommunity/api-services';
import { FormattedMessage } from 'react-intl';
const PREFIX = 'SCAccountChangeMailValidation';
const classes = {
    root: `${PREFIX}-root`,
    success: `${PREFIX}-success`,
    error: `${PREFIX}-error`
};
const Root = styled(Box, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(({ theme }) => ({
    [`&.${classes.root}`]: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    }
}));
/**
 * > API documentation for the Community-JS AccountChangeMailValidation component. Learn about the available props and the CSS API.

 #### Import

 ```jsx
 import {AccountChangeMailValidation} from '@selfcommunity/react-ui';
 ```

 #### Component Name

 The name `SCAccountChangeMailValidation` can be used when providing style overrides in the theme.


 #### CSS

 |Rule Name|Global class|Description|
 |---|---|---|
 |root|.SCAccountChangeMailValidation-root|Styles applied to the root element.|
 |success|.SCAccountChangeMailValidation-success|Styles applied to the success Alert.|
 |error|.SCAccountChangeMailValidation-error|Styles applied to the error Alert.|

 *
 * @param inProps
 */
export default function AccountChangeMailValidation(inProps) {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX
    });
    // PROPS
    const { className, onSuccess, onError, validationCode, userId, newEmail, successAction = null, errorAction = null } = props, rest = __rest(props, ["className", "onSuccess", "onError", "validationCode", "userId", "newEmail", "successAction", "errorAction"]);
    // STATE
    const [succeed, setSucceed] = useState(false);
    const [error, setError] = useState(false);
    // CONTEXT
    const scUserContext = useSCUser();
    // EFFECTS
    useEffect(() => {
        if (scUserContext.user === undefined || !validationCode || !newEmail || isNaN(userId) || succeed) {
            return;
        }
        setError(false);
        UserService.confirmChangeUserMail(userId, newEmail, validationCode)
            .then((res) => {
            setSucceed(true);
            onSuccess && onSuccess(res);
        })
            .catch((error) => {
            setError(true);
            onError && onError(error);
        });
    }, [validationCode, userId, newEmail, scUserContext.user, succeed]);
    if (scUserContext.user === undefined) {
        return null;
    }
    // RENDER
    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: succeed ? (_jsxs(Alert, Object.assign({ severity: "success", className: classes.success }, { children: [typeof succeed === 'string' ? (succeed) : (_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.success", defaultMessage: "ui.accountChangeMailValidation.success" })), successAction] }))) : error ? (_jsxs(Alert, Object.assign({ severity: "error", className: classes.error }, { children: [_jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.error", defaultMessage: "ui.accountChangeMailValidation.error" }), errorAction] }))) : (_jsxs(_Fragment, { children: [_jsx(CircularProgress, {}), _jsx(FormattedMessage, { id: "ui.accountChangeMailValidation.verifying", defaultMessage: "ui.accountChangeMailValidation.verifying" })] })) })));
}