more

src/Components/Modals/PaymentModal.js

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import Button from "../../pageElements/Button";
+import Modal from "react-bootstrap/Modal";
+import TextInput from "../../pageElements/TextInput";
+import { db } from "../../firebase";
+
+const PaymentModal = ({
+  onCancel,
+  onConfirm,
+  buttonLabelText,
+  modalText,
+  isBusy,
+  setCardNumber,
+}) => {
+  return (
+    <Modal show="true" onHide={onCancel} size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Enter Payment Card Information</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <span>{modalText}</span>
+        <div style={{ marginTop: "16px" }}>
+          <TextInput
+            key={"captionTwo"}
+            name={"captionTwo"}
+            value={"issueText"}
+            message={"data.captionTwo.message"}
+            onChange={(e) => setCardNumber(e.target.value)}
+            label={"Card Number"}
+          />
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button
+          disabled={isBusy}
+          className="secondary-button"
+          onClick={onCancel}
+          labelText="Cancel"
+        />
+        <Button
+          disabled={isBusy}
+          className="primary-button"
+          onClick={onConfirm}
+          labelText={buttonLabelText}
+        />
+      </Modal.Footer>
+    </Modal>
+  );
+};
+
+export default PaymentModal;