Merge pull request #62 from kjannette/paymentUItweaks

Payment u itweaks

src/Components/Modals/PaymentModal.js

@@ -109,10 +109,15 @@ const PaymentModal = ({
           {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
             (names, j) => (
               <Row key={`row${j}-modal`}>
+                {j === 2 ? (
+                  <div className="exp-date-hearder">Card Expiration Date</div>
+                ) : (
+                  <></>
+                )}
                 {names.map((name, i) => (
                   <Col
                     key={`${name}${i + fieldsChunkSize * j}-modal`}
-                    className="mb-3"
+                    className={j === 2 ? "mb3 short-column" : "mb-3"}
                   >
                     <TextInput
                       key={`${name}-modal-input`}
@@ -129,6 +134,13 @@ const PaymentModal = ({
                       type={paymentfields[name].type}
                       values={paymentfields[name].values}
                       disabled={isBusy}
+                      inputClassName={
+                        j === 2
+                          ? "skinny-input"
+                          : j === 1 && i === 1
+                          ? "skinny-input"
+                          : null
+                      }
                     />
                   </Col>
                 ))}

src/Components/SignupPage/SignupPage.js

@@ -167,11 +167,7 @@ const SignupPage = () => {
       practiceArea,
       email,
     } = dataValues;
-    console.log(
-      "customerId, subscriptionId in saveUserData",
-      customerId,
-      subscriptionId
-    );
+
     const userData = {
       docsAllowed,
       docsGenerated,

src/Constants/Fields/PaymentFields.js

@@ -19,19 +19,19 @@ export const paymentfields = {
   },
   cardCvvCode: {
     required: true,
-    label: "Card CVV Number",
+    label: "CVV Number",
     maxLength: 5,
     type: "cardCvvCode",
   },
   cardExpirationMonth: {
     required: true,
-    label: "Card Expiration Month",
+    label: "Month",
     maxLength: 2,
     type: "cardExpirationMonth",
   },
   cardExpirationYear: {
     required: true,
-    label: "Card Expiration Year",
+    label: "Year",
     maxLength: 4,
     type: "cardExpirationYear",
   },

src/pageElements/TextInput.js

@@ -15,9 +15,15 @@ const TextInput = (props) => {
     type,
     disabled,
   } = props;
-
+  console.log("inputClassName", inputClassName);
   return (
-    <div className="pe-input-container form-floating mb-3">
+    <div
+      className={
+        inputClassName
+          ? `pe-input-container form-floating mb-3 ${inputClassName}`
+          : "pe-input-container form-floating mb-3"
+      }
+    >
       {label ? (
         <label htmlFor="signup" className="form-label">
           {label}

src/styles/modals.scss

@@ -84,6 +84,8 @@
   margin-bottom: 12px;
   margin-right: 20px;
   padding-right: 20px;
+  padding-bottom: 8px;
+  margin-bottom: 18px;
 }
 
 .paymentmodal-order-summarybox {
@@ -113,3 +115,16 @@
   border-bottom: 1px solid #cecece;
   margin-bottom: 4px;
 }
+
+.short-column {
+  max-width: 120px !important;
+  margin-right: 2.3rem;
+  margin-bottom: 1rem;
+}
+
+.exp-date-hearder {
+  margin-top: -14px;
+  margin-bottom: 9px;
+  margin-left: 13px;
+  padding-left: 7px;
+}

src/styles/text-input.scss

@@ -11,3 +11,11 @@
 .select-option:hover {
   background-color: white;
 }
+
+.skinny-input {
+  width: 140px;
+}
+
+.skinny-column {
+  width: 140px !important;
+}