92 lines
2.8 KiB
JavaScript
92 lines
2.8 KiB
JavaScript
import Button from "../../pageElements/Button";
|
|
import Modal from "react-bootstrap/Modal";
|
|
import TextInput from "../../pageElements/TextInput";
|
|
import { splitEvery } from "../../Utils/Array";
|
|
import Col from "react-bootstrap/Col";
|
|
import Form from "react-bootstrap/Form";
|
|
import Row from "react-bootstrap/Row";
|
|
import "../../styles/modals.scss";
|
|
|
|
const PaymentModal = ({
|
|
buttonLabelText,
|
|
isBusy,
|
|
paymentData,
|
|
paymentfields,
|
|
handleChangePaymentInput,
|
|
orderSummary,
|
|
handleSignUp,
|
|
setShowPaymentModal,
|
|
handleSignup,
|
|
selectedPlan,
|
|
isAnnual,
|
|
fieldsChunkSize,
|
|
}) => {
|
|
console.log("orderSummary", orderSummary);
|
|
let price;
|
|
if (orderSummary?.plan?.pricing[0].amount) {
|
|
console.log(orderSummary?.plan?.pricing[0]);
|
|
}
|
|
//? orderSummary?.plan?.pricing[1].amount
|
|
//: orderSummary?.plan?.pricing[0].amount;
|
|
const planName = "orderSummary.plan.name;";
|
|
return (
|
|
<Modal show="true" size="lg">
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Enter Payment Information</Modal.Title>
|
|
</Modal.Header>
|
|
<Modal.Body>
|
|
<div className="payment-modal-text-wrapper">
|
|
Subrscription Type:{planName}
|
|
</div>
|
|
<Form className="payment-form">
|
|
{splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
|
|
(names, j) => (
|
|
<Row key={`row${j}-modal`}>
|
|
{names.map((name, i) => (
|
|
<Col
|
|
key={`${name}${i + fieldsChunkSize * j}-modal`}
|
|
className="mb-3"
|
|
>
|
|
<TextInput
|
|
key={`${name}-modal-input`}
|
|
name={name}
|
|
value={paymentData[name].value}
|
|
onChange={(e) => handleChangePaymentInput(e, name)}
|
|
error={paymentData[name].error}
|
|
message={paymentData[name].message}
|
|
label={
|
|
paymentData[name].value.length === 0
|
|
? paymentfields[name].label
|
|
: ""
|
|
}
|
|
type={paymentfields[name].type}
|
|
values={paymentfields[name].values}
|
|
disabled={isBusy}
|
|
/>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
)
|
|
)}
|
|
</Form>
|
|
</Modal.Body>
|
|
<Modal.Footer>
|
|
<Button
|
|
disabled={isBusy}
|
|
className="secondary-button"
|
|
onClick={() => setShowPaymentModal(false)}
|
|
labelText="Cancel"
|
|
/>
|
|
<Button
|
|
disabled={isBusy}
|
|
className="primary-button"
|
|
onClick={handleSignup}
|
|
labelText="Signup"
|
|
/>
|
|
</Modal.Footer>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
export default PaymentModal;
|