Created
May 18, 2020 16:24
-
-
Save TedSean/82012dcf938087e7666bb36c82a07b46 to your computer and use it in GitHub Desktop.
This is the child of a parent component PrepaidCard(/index/prepaid-card) and on form submission after success message. I want to route it to parent.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useState, useEffect, memo } from "react"; | |
import { useSelector, useDispatch } from "react-redux"; | |
import { | |
Card, | |
CardHeader, | |
CardBody, | |
CardTitle, | |
Row, | |
Col, | |
Form, | |
Label, | |
Input | |
} from "reactstrap"; | |
import { sha256 } from "js-sha256"; | |
import { useTranslation } from "react-i18next"; | |
import { Redirect, useHistory } from "react-router-dom"; | |
import { swalWithBootstrapButtons } from "../../../utils/sweetalert"; | |
import DatePickers from "react-datepicker"; | |
import PhoneInput from "react-phone-input-2"; | |
import { | |
applyPrepaidCard, | |
resetApplyPrepaidCard | |
} from "../../../redux/actions/prepaidCardActions"; | |
import CustomButton from "../../../components/CustomButton/CustomButton.jsx"; | |
import val from "../../../getThemeDetails"; | |
import TACComponent from "../../../components/SignUp/TAC"; | |
import getCitizenShipCode from "../../../utils/citizenShipCode"; | |
import LoaderButton from "../../../components/CustomButton/LoaderButton"; | |
import Util from "../../../utils/helper"; | |
import ShowPrepaidCards from "../DisplayPrepaidCards/ShowPrepaidCards"; | |
import Layout from "../../../components/Wrappers/Layout"; | |
const PrepaidCardForm = | |
() => { | |
const origin = "prepaidCard"; | |
const docTypes = [ | |
{ id: 1, type: "Passport" }, | |
{ id: 2, type: "National ID Card" }, | |
{ id: 3, type: "Driving License" } | |
]; | |
const login = useSelector(state => state.login); | |
const [title, setTitle] = useState("Mr"); | |
const [countryCode, setCountryCode] = useState("+91"); | |
const [idProofType, setIdProofType] = useState("1"); | |
const [states, setStates] = useState({ | |
firstName: "", | |
lastName: "", | |
contactNumber: "", | |
dateOfBirth: "", | |
addressLine: "", | |
city: "", | |
zip: "", | |
ssn: "", | |
idDocumentNumber: "", | |
idIssuer: "" | |
}); | |
const { t } = useTranslation(); | |
const [spinner, setSpinner] = useState(false); | |
const [issuerDate, setIssuerDate] = useState(new Date()); | |
const [expiryDate, setExpiryDate] = useState(new Date()); | |
const [TACLinkClicked, setTACLinkClicked] = useState(false); | |
const [tos, setTos] = useState(false); | |
const dispatch = useDispatch(); | |
const applyPrepaidCardState = useSelector(state => state.applyPrepaidCard); | |
const getPrepaidCardState = useSelector(state => state.getPrepaidCard) | |
const history = useHistory(); | |
useEffect(() => { | |
history.push("/index/prepaid-card-from") | |
}, []) | |
useEffect(() => { | |
if (applyPrepaidCardState.success) { | |
swalWithBootstrapButtons.fire({ | |
type: "success", | |
title: "Success", | |
text: applyPrepaidCardState.status, | |
onClose: () => { | |
dispatch(resetApplyPrepaidCard()); | |
return history.push("/index/prepaid-card") | |
} | |
}); | |
} | |
if (applyPrepaidCardState.invalidRequest) { | |
swalWithBootstrapButtons.fire({ | |
type: "error", | |
title: "Oops!!", | |
text: `Something went wrong...please try again`, | |
onClose: () => dispatch(resetApplyPrepaidCard()) | |
}); | |
} | |
if (applyPrepaidCardState.failed) { | |
swalWithBootstrapButtons.fire({ | |
type: "error", | |
title: "Oops!!", | |
text: applyPrepaidCardState.status, | |
onClose: () => { | |
dispatch(resetApplyPrepaidCard()); | |
} | |
}); | |
} | |
}, [applyPrepaidCardState]); | |
const handleDOB = date => { | |
setStates(prevState => ({ | |
...prevState, | |
dateOfBirth: date | |
})); | |
}; | |
const handleChange = ({ target: { value, name } }) => { | |
setStates(prevState => ({ | |
...prevState, | |
[name]: value | |
})); | |
}; | |
const handleContact = (value, data) => { | |
setCountryCode(data.dialCode); | |
setStates(prevState => ({ ...prevState, contactNumber: value })); | |
}; | |
const handleTAC = e => { | |
e.preventDefault(); | |
TACToggle(); | |
}; | |
/** | |
* @param {string} On TAC Modal, agree/cancel would toggle tos state | |
* | |
*/ | |
const TACToggle = param => { | |
if (param === "Accept") setTos(true); | |
else if (param === "Cancel") setTos(false); | |
setTACLinkClicked(prev => !prev); | |
}; | |
//If it returns true means apply button is disabled else not | |
const disabledButton = () => { | |
return !( | |
!Object.values(states).some(v => !v) && | |
tos && | |
issuerDate instanceof Date && | |
expiryDate instanceof Date | |
); | |
}; | |
const handleApplyPrepaidCard = e => { | |
e.preventDefault(); | |
setSpinner(true); | |
const mobileNumber = `00${states.contactNumber}`.replace(/\D+/g, ""); | |
const formattedDate = Util.formatDate(states.dateOfBirth, true); | |
const verificationHash = sha256( | |
login.data.secKey + | |
login.data.cust_id + | |
val.walletOwnerId + | |
login.data.cust_email + | |
mobileNumber + | |
formattedDate | |
); | |
const req = { | |
custId: login.data.cust_id, | |
walletOwnerId: val.walletOwnerId, | |
email: login.data.cust_email, | |
title, | |
firstName: states.firstName, | |
lastName: states.lastName, | |
mobileNumber, | |
dateOfBirth: formattedDate, | |
addressLine: states.addressLine, | |
city: states.city, | |
zip: states.zip, | |
countryCode: "826", | |
citizenshipCode: "100", | |
ssn: states.ssn, | |
idProofType, | |
idDocumentNumber: states.idDocumentNumber, | |
idIssuer: states.idIssuer, | |
idIssueDate: "2018-01-01T00:00:00", | |
idExpriryDate: "2025-01-01T00:00:00", | |
verificationHash | |
}; | |
// console.log(req); | |
dispatch(applyPrepaidCard(req)); | |
}; | |
return ( | |
<div className="content prepaid-card-form"> | |
<Form onSubmit={handleApplyPrepaidCard}> | |
<Row> | |
<Col md={12} xs={12}> | |
<Card className="card-user"> | |
<Row> | |
<Col className="border-right" md={6} sm={12}> | |
<CardHeader> | |
<CardTitle>Personal Details</CardTitle> | |
</CardHeader> | |
<hr /> | |
<CardBody> | |
<Row> | |
<Col md={3}> | |
<Input | |
type="select" | |
name="title" | |
onChange={({ target: { value } }) => | |
setTitle(value) | |
} | |
value={title} | |
> | |
{["Mr", "Miss", "Mrs"].map(t => ( | |
<option value={t} key={t}> | |
{t} | |
</option> | |
))} | |
</Input> | |
</Col> | |
</Row> | |
<Row className="mt-2"> | |
<Col md={6}> | |
<Label for="firstName"> | |
First Name<small className="text-danger">*</small> | |
</Label> | |
<Input | |
type="text" | |
name="firstName" | |
onChange={handleChange} | |
value={states.firstName} | |
/> | |
</Col> | |
<Col md={6}> | |
<Label for="firstName"> | |
Last Name<small className="text-danger">*</small> | |
</Label> | |
<Input | |
type="text" | |
name="lastName" | |
onChange={handleChange} | |
value={states.lastName} | |
/> | |
</Col> | |
</Row> | |
<Row className="mt-4"> | |
<Col md={6}> | |
<Label for="mobile"> | |
Mobile Number | |
<small className="text-danger">*</small> | |
</Label> | |
<PhoneInput | |
defaultCountry={"in"} | |
onChange={handleContact} | |
enableSearchField={true} | |
value={states.contactNumber} | |
/> | |
</Col> | |
<Col md={6}> | |
<Label for="DOB"> | |
Date of Birth | |
<small className="text-danger">*</small> | |
</Label> | |
<DatePickers | |
dateFormat="yyyy/MM/dd" | |
onChange={handleDOB} | |
peekNextMonth | |
showMonthDropdown | |
showYearDropdown | |
dropdownMode="select" | |
maxDate={new Date()} | |
className="form-control" | |
selected={states.dateOfBirth} | |
/> | |
</Col> | |
</Row> | |
</CardBody> | |
</Col> | |
<Col md={6} sm={12}> | |
<CardHeader> | |
<CardTitle>Address Details</CardTitle> | |
</CardHeader> | |
<hr /> | |
<CardBody style={{ marginTop: "3.7rem" }}> | |
<Row> | |
<Col md={12}> | |
<Label for="firstName"> | |
Address Line<small className="text-danger">*</small> | |
</Label> | |
<Input | |
type="text" | |
name="addressLine" | |
onChange={handleChange} | |
value={states.addressLine} | |
/> | |
</Col> | |
</Row> | |
<Row className="mt-4"> | |
<Col md={6}> | |
<Label for="city"> | |
City<small className="text-danger">*</small> | |
</Label> | |
<Input | |
type="text" | |
name="city" | |
onChange={handleChange} | |
value={states.city} | |
/> | |
</Col> | |
<Col md={6}> | |
<Label for="zipCode"> | |
Zip code<small className="text-danger">*</small> | |
</Label> | |
<Input | |
type="text" | |
name="zip" | |
onChange={handleChange} | |
value={states.zip} | |
/> | |
</Col> | |
</Row> | |
</CardBody> | |
</Col> | |
</Row> | |
</Card> | |
</Col> | |
<Col md={12} xs={12}> | |
<Card className="card-user prepaid-card-date"> | |
<CardHeader> | |
<CardTitle>ID Proof</CardTitle> | |
</CardHeader> | |
<hr /> | |
<CardBody className="user-details"> | |
<Row> | |
<Col md={4} xs={12}> | |
<Label>SSN Number</Label> | |
<Input | |
type="text" | |
name="ssn" | |
onChange={handleChange} | |
value={states.ssn} | |
/> | |
</Col> | |
<Col | |
md={4} | |
sm={12} | |
xs={12} | |
className="d-flex align-items-end" | |
> | |
<Input | |
type="select" | |
name="titles" | |
onChange={({ target: { value } }) => | |
setIdProofType(value) | |
} | |
style={{ height: "40px" }} | |
value={idProofType} | |
> | |
{docTypes.map(doc => ( | |
<option value={doc.id} key={doc.id}> | |
{doc.type} | |
</option> | |
))} | |
</Input> | |
</Col> | |
<Col md={4} xs={12} sm={12}> | |
<Label for="idDocumentNumber">ID Document Number</Label> | |
<Input | |
type="text" | |
name="idDocumentNumber" | |
onChange={handleChange} | |
value={states.idDocumentNumber} | |
/> | |
</Col> | |
</Row> | |
<Row className="mt-4"> | |
<Col md={4} xs={12} sm={12}> | |
<Label for="idIssuer">ID Issuer</Label> | |
<Input | |
type="text" | |
name="idIssuer" | |
onChange={handleChange} | |
value={states.idIssuer} | |
/> | |
</Col> | |
<Col md={4} xs={12} sm={12}> | |
<Label for="idIssueDate">ID Issue Date</Label> | |
<DatePickers | |
selected={issuerDate} | |
onChange={date => setIssuerDate(date)} | |
showTimeSelect | |
timeFormat="HH:mm" | |
timeIntervals={5} | |
timeCaption="time" | |
dateFormat="MMMM d, yyyy h:mm aa" | |
/> | |
</Col> | |
<Col md={4} xs={12} sm={12}> | |
<Label for="idExpiryDate">ID Expiry Date</Label> | |
<DatePickers | |
selected={expiryDate} | |
onChange={date => setExpiryDate(date)} | |
showTimeSelect | |
timeFormat="HH:mm" | |
timeIntervals={5} | |
timeCaption="time" | |
dateFormat="MMMM d, yyyy h:mm aa" | |
/> | |
</Col> | |
</Row> | |
<Row className="mt-4 ml-1"> | |
<Col md={12}> | |
<Input | |
type="checkbox" | |
name="Tos" | |
onChange={() => setTos(prev => !prev)} | |
value={tos} | |
checked={tos} | |
/> | |
<Label for="TAC"> | |
<a | |
href="/" | |
style={{ color: "#9A9A9A" }} | |
onClick={handleTAC} | |
> | |
Terms and conditions of Card acceptance | |
</a> | |
<small className="text-danger">*</small> | |
</Label> | |
{TACLinkClicked ? ( | |
<TACComponent | |
{...{ TACLinkClicked, TACToggle, origin }} | |
/> | |
) : ( | |
"" | |
)} | |
</Col> | |
</Row> | |
<Row className="mt-4"> | |
<Col md={12} className="d-flex justify-content-center"> | |
<CustomButton | |
color="primary" | |
className="buttons" | |
round | |
disabled={disabledButton()} | |
type="submit" | |
> | |
<LoaderButton | |
isLoading={applyPrepaidCardState.isLoading} | |
spinner={spinner} | |
> | |
Apply | |
</LoaderButton> | |
</CustomButton> | |
</Col> | |
</Row> | |
</CardBody> | |
</Card> | |
</Col> | |
</Row> | |
</Form> | |
</div> | |
); | |
} | |
export default PrepaidCardForm; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment