Adding a modal
"Alright, this works well," continued Mike.
"However, it's a bit clumsy right now. After the timeout, there's nothing a user can do. We can add a popup to notify the user. Instead of showing the error page, let's display a modal with an alert and redirect the user to the first page so that the user can restart the flow. We can use Bootstrap modal to achieve this."
"Got it. Want me to give it a try?" asked Shawn.
"Go ahead!"
"Let me start with setting up the modal first. I will use a simple bootstrap modal to display it. After that's done, I will need to invoke display of the modal from alertCartTimeout
, I guess. I will also be setting up to display the first page and reset form data."
"Correct."
"This is how the modal will look"
import React from 'react'; var ModalAlertTimeout = React.createClass({ render() { return ( <div className="modal fade" ref='timeoutModal'> <div className="modal-dialog"> <div className="modal-content"> ...