%PDF-
%PDF-
Mini Shell
Mini Shell
import React from "react";
import { useDispatch, useSelector } from "react-redux";
import PropTypes from "prop-types";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { withStyles } from "@material-ui/core/styles";
import { styles, Button } from "common/components";
import countryConfig from "config/countryData";
import { scramblePhone } from "actions/list_actions";
function CannotVerify({ classes }) {
const [t] = useTranslation();
const navigate = useNavigate();
const dispatch = useDispatch();
const userPhone = useSelector((state) => state.resetPassword.get("phoneNumber"));
const pendingAccessToken = useSelector((state) => state.resetPassword.get("pendingAccessToken"));
const contactPhone = useSelector(
(state) => countryConfig.countryData[state.config.toJS().config.countryConstant].tel_number,
);
const cannotVerifyDescriptionParts = t("resetPassword.additionalVerification.cannotVerifyDescription").split("+XXXXXXXXX");
return (
<div style={{ marginBottom: "10px" }}>
<h3 className={classes.titleSmall}>{t("resetPassword.additionalVerification.cannotVerifyTitle")}</h3>
<p className={classes.bodyLarge}>
{cannotVerifyDescriptionParts[0]}
<a className={classes.phoneNumber} href={`tel:${contactPhone}`}>{contactPhone}</a>
{cannotVerifyDescriptionParts[1]}
</p>
<br />
<Button
onClick={() => {
dispatch(scramblePhone({ pendingAccessToken, username: userPhone }));
navigate("/");
}}
fullWidth
primary
>
{t("resetPassword.additionalVerification.createNewAccount")}
</Button>
</div>
);
}
export default withStyles(styles)(CannotVerify);
CannotVerify.propTypes = {
classes: PropTypes.object.isRequired,
};
Zerion Mini Shell 1.0