%PDF- %PDF-
Direktori : /home/emergentqj/actioncivile/pre-auth/def/static/js/components/ForgotPassword/ |
Current File : /home/emergentqj/actioncivile/pre-auth/def/static/js/components/ForgotPassword/SendLicensePlate.jsx |
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));