more

src/Components/Modals/PaymentModal.js

@@ -21,22 +21,16 @@ const PaymentModal = ({
   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;";
+  const planName = selectedPlan[0].name ? selectedPlan[0].name : null;
   return (
     <Modal show="true" size="lg">
-      <Modal.Header closeButton>
+      <Modal.Header className="payment-modal-header" closeButton>
         <Modal.Title>Enter Payment Information</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <div className="payment-modal-text-wrapper">
-          Subrscription Type:{planName}
+          <div className="paymodal-summary-right">Subscription Type:</div>
+          <div className="paymodal-summary-left">{planName}</div>
         </div>
         <Form className="payment-form">
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(

src/Components/SignupPage/SignupPage.js

@@ -49,7 +49,6 @@ const SignupPage = () => {
       : process.env.REACT_APP_API_PROD;
   const [showAddAccount, setShowAddAccount] = useState(false);
   const [numberOfAccountsToAdd, setNumberOfAccountsToAdd] = useState();
-  const orderSummary = { plan: selectedPlan, price: 1 };
 
   const handleChangeInput = (e, name) => {
     const newData = handleFormDataChange(e, name, data, signupFields);
@@ -607,7 +606,6 @@ const SignupPage = () => {
           setShowPaymentModal={setShowPaymentModal}
           handleChangePaymentInput={handleChangePaymentInput}
           handleSignup={handleSignup}
-          orderSummary={orderSummary}
           notice={notice}
           setNotice={setNotice}
           selectedPlan={selectedPlan}

src/styles/modals.scss

@@ -78,6 +78,13 @@
 }
 
 .payment-modal-text-wrapper {
-  margin: 8px 0px 18px 0px;
+  margin: 6px 0px 6px 0px;
   padding-left: 4px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.payment-modal-header {
+  padding-bottom: 4px !important;
 }