%PDF-
%PDF-
Mini Shell
Mini Shell
import React, { useState } from "react";
import PropTypes from "prop-types";
import { Field, reduxForm } from "redux-form";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { required } from "utils/fieldValidations";
import {
Grid, Modal, Divider, Link,
} from "@material-ui/core";
import { withStyles } from "@material-ui/core/styles";
import Cross from "assets/images/icons/cross.svg";
import {
Box,
Button,
HelpText,
RenderField,
styles,
Title,
} from "common/components";
import { validateLicensePlate } from "components/ForgotPassword/validate";
function SendLicensePlate({
handleSubmit,
sendLicensePlate,
phone,
licensePlate,
classes,
phoneNumber,
licenseError,
scramblePhone,
pendingAccessToken,
}) {
const [isModalOpen, setIsModalOpen] = useState(false);
const [showCreateNewConfirmation, setShowCreateNewConfirmation] = useState(false);
const [t] = useTranslation();
const navigate = useNavigate();
const normalizeLicensePlate = (val) => {
if (!val) {
return val;
}
return val.replace(/\s+/g, "");
};
const openForgotLicensePlate = () => {
setIsModalOpen(true);
};
return (
<>
<form
name="sendLicensePlateForm"
onSubmit={handleSubmit(() => sendLicensePlate(phone, licensePlate, pendingAccessToken))}
>
<Box extraSpaceAfter component="header">
<Title>{t("resetPassword.additionalVerification.additionalVerificationRequired")}</Title>
<HelpText>{t("resetPassword.additionalVerification.enterPreviousLicensePlate")}</HelpText>
</Box>
<Box extraSpaceAfter>
<Field
name="licensePlate"
component={RenderField}
placeholder="License plate"
type="text"
errorString={validateLicensePlate(licenseError, t)}
validate={[required]}
normalize={normalizeLicensePlate}
/>
</Box>
<Box>
<Grid container direction="row" spacing={2}>
<Grid item xs={12} container justify="flex-start">
<a
onClick={openForgotLicensePlate}
className={classes.link}
>
{t("resetPassword.additionalVerification.forgotLicensePlate")}
</a>
</Grid>
</Grid>
</Box>
<Box>
<Grid container direction="row" spacing={2}>
<Grid item xs={12}>
<Button
type="submit"
primary
fullWidth
onClick={
handleSubmit(() => sendLicensePlate(phone, licensePlate, pendingAccessToken))
}
>
{t("resetPassword.additionalVerification.verify")}
</Button>
</Grid>
</Grid>
</Box>
</form>
<Modal
open={isModalOpen}
>
<div className={classes.modal}>
{!showCreateNewConfirmation ? (
<>
<img className={classes.modalCloseCross} onClick={() => setIsModalOpen(false)} src={Cross} alt="close" />
<div className={classes.modalTitle}>
{t("resetPassword.additionalVerification.forgotLicensePlate")}
?
</div>
<p className={classes.modalParagraph}>
{t("resetPassword.additionalVerification.cantRememberLicensePlane")}
</p>
<p className={classes.modalParagraph}>
{t("resetPassword.additionalVerification.contactCustomerCareOn")}
{": "}
<a className={classes.phoneNumber} href={`tel:${phoneNumber}`}>{phoneNumber}</a>
</p>
<Divider />
<p className={classes.modalParagraph}>{t("resetPassword.additionalVerification.optionToCreateNewAccount")}</p>
<Grid container direction="row" spacing={2}>
<Grid item xs={12}>
<Link
primary
onClick={() => setShowCreateNewConfirmation(true)}
className={classes.modalSubmitButton}
>
{t("resetPassword.additionalVerification.createNewAccount")}
</Link>
</Grid>
</Grid>
</>
) : (
<>
<div className={classes.modalTitle}>
{t("resetPassword.additionalVerification.createNewAccount")}
?
</div>
<p style={{ marginBottom: "40px" }}>{t("resetPassword.additionalVerification.loseInfoWarning")}</p>
<Button
primary
fullWidth
onClick={() => {
scramblePhone({ username: phone, pendingAccessToken });
navigate("/");
}}
>
{t("resetPassword.additionalVerification.create")}
</Button>
<div style={{ marginTop: "20px" }} />
<Button
fullWidth
onClick={() => {
setIsModalOpen(false);
setShowCreateNewConfirmation(false);
}}
>
Cancel
</Button>
</>
)}
</div>
</Modal>
</>
);
}
SendLicensePlate.propTypes = {
classes: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
sendLicensePlate: PropTypes.func.isRequired,
phone: PropTypes.string,
pendingAccessToken: PropTypes.string.isRequired,
licensePlate: PropTypes.string,
phoneNumber: PropTypes.string.isRequired,
licenseError: PropTypes.object,
scramblePhone: PropTypes.func.isRequired,
};
SendLicensePlate.defaultProps = {
phone: "",
licensePlate: "",
licenseError: {},
};
export default reduxForm({ form: "sendLicensePlateForm" })(withStyles(styles)(SendLicensePlate));
Zerion Mini Shell 1.0