ax3Client/src/Components/Modals/PaymentModal.js

import { useMemo } from "react";
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 = ({
  isBusy,
  paymentData,
  paymentfields,
  handleChangePaymentInput,
  handleSignUp,
  setShowPaymentModal,
  handleSignup,
  selectedPlan,
  isAnnual,
  fieldsChunkSize,
  numberOfAccountsToAdd,
}) => {
  const monthlySubscriptionPriceToday = selectedPlan[0].pricing[0].amount;
  const annualSubscriptionPriceToday = selectedPlan[0].pricing[1].amount * 12;

  const additionalAccountsMonthlyPriceToday = selectedPlan[0].pricing[2].amount
    ? selectedPlan[0].pricing[2].amount * numberOfAccountsToAdd
    : null;

  const additionalAccountsAnnualPriceToday =
    additionalAccountsMonthlyPriceToday * 12;

  const extraAccountsPrice = isAnnual
    ? additionalAccountsAnnualPriceToday
      ? additionalAccountsAnnualPriceToday
      : 0
    : additionalAccountsMonthlyPriceToday
    ? additionalAccountsMonthlyPriceToday
    : 0;

  const showAdditionaLAccountsView =
    (selectedPlan[0]?.value === "partner" && numberOfAccountsToAdd > 0) ||
    (selectedPlan[0]?.value === "seniorPartner" && numberOfAccountsToAdd > 0);

  const planName = selectedPlan[0].name ? selectedPlan[0].name : null;
  const billingPeriod = isAnnual ? "Annually" : "Monthly";
  const amountToday = isAnnual
    ? annualSubscriptionPriceToday
    : monthlySubscriptionPriceToday;

  const totalToday = amountToday + extraAccountsPrice;

  const handleSignupClick = () => {
    //clear fields
    handleSignup();
  };

  return (
    <Modal show="true" size="lg">
      <Modal.Header className="payment-modal-header" closeButton>
        <Modal.Title>Enter Payment Information</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <div className="payment-summary-header">Order Summary</div>
        <div className="order-summary-container">
          <div className="paymentmodal-order-summarybox">
            <div className="payment-modal-text-wrapper">
              <div className="paymodal-summary-right">Subscription Type:</div>
              <div className="paymodal-summary-left">{planName}</div>
            </div>
            <div className="payment-modal-text-wrapper">
              <div className="paymodal-summary-right">
                Billing Period/Amount:
              </div>
              <div className="paymodal-summary-left">
                {billingPeriod} - ${amountToday}
              </div>
            </div>
            {numberOfAccountsToAdd !== undefined &&
            numberOfAccountsToAdd > 0 ? (
              <div className="payment-modal-text-wrapper">
                <div className="paymodal-summary-right">
                  {numberOfAccountsToAdd} Addiitonal{" "}
                  {numberOfAccountsToAdd > 1 ? `accounts:` : `account:`}
                </div>
                <div className="paymodal-summary-left">
                  {billingPeriod} - ${extraAccountsPrice}
                </div>
              </div>
            ) : (
              <></>
            )}
            <div className="payment-modal-text-wrapper">
              <div className="paymodal-summary-right">Total today:</div>
              <div className="paymodal-summary-left">${totalToday}</div>
            </div>
            {isAnnual ? (
              <div className="payment-modal-text-wrapper">
                <div className="paymodal-summary-right"></div>
                <div className="paymodal-summary-left-bonus">
                  Includes 15% discount for convenient annual billing
                </div>
              </div>
            ) : (
              <></>
            )}
          </div>
        </div>

        <Form className="payment-form">
          {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
            (names, j) => (
              <Row key={`row${j}-modal`} className="payment-order-row">
                {j === 2 ? (
                  <div className="exp-date-hearder">Card Expiration Date</div>
                ) : (
                  <></>
                )}
                {names.map((name, i) => (
                  <Col
                    key={`${name}${i + fieldsChunkSize * j}-modal`}
                    className={j === 2 ? "mb3 short-column" : "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}
                      inputClassName={
                        j === 2
                          ? "skinny-input"
                          : j === 1 && i === 1
                          ? "skinny-input"
                          : null
                      }
                    />
                  </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={handleSignupClick}
          labelText="Signup"
        />
      </Modal.Footer>
    </Modal>
  );
};

export default PaymentModal;

/*
  const tempExtraAccountsPrice = isAnnual
    ? additionalAccountsAnnualPriceToday
    : additionalAccountsMonthlyPriceToday;

  const extraAccountsPrice =
    tempExtraAccountsPrice === NaN || tempExtraAccountsPrice === undefined
      ? 0
      : 0;
      
  */