Merge pull request #458 from yoution/yoution-issues

fix: issues #451, #453, #454, #455

Author: nikolay83

src/routes/CreateNewTeam/components/EditRoleForm/index.jsx

@@ -155,7 +155,7 @@ function EditRoleForm({ onChange, role }) {
                   )}
                 </td>
                 <td>
-                  <Field name="hoursPerWeek" initialValue={"40"}>
+                  <Field name="hoursPerWeek" initialValue={role.hoursPerWeek}>
                     {(props) => (
                       <Select
                         name={props.input.name}

src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx

@@ -51,7 +51,7 @@ const PaymentForm = ({ calculatedAmount }) => {
   const [dropdownValue, setDropdownValue] = useState("");
   const [processing, setProcessing] = useState(false);
   const [requestLoading, setRequestLoading] = useState(false);
-  const [errors, setErrors] = useState({});
+  const [errors, setErrors] = useState({card: true, cardExpire: true, cardCvc: true});
   const [clicked, setClicked] = useState(true);
   const stripe = useStripe();
   const elements = useElements();
@@ -85,6 +85,12 @@ const PaymentForm = ({ calculatedAmount }) => {
       ...temp,
     });
   };
+  const handleStripeElementError = (fieldName, error) => {
+    errors[fieldName] = error ? true: false
+    setErrors({
+      ...errors,
+    });
+  }
   const handleInputValue = (e) => {
     const { name, value } = e.target;
     setFormValues({
@@ -139,17 +145,22 @@ const PaymentForm = ({ calculatedAmount }) => {
         })
         .catch((err) => {
           toastr.error("Error calculating amount", err.message);
+        })
+        .finally(() => {
+          setClicked(true);
         });
     }
   };
 
   const formIsValid = (fieldValues = formValues) => {
+    // check card valid
+    const cardValid = !errors['card'] && !errors['cardExpire'] && !errors['cvc']
     const dropdown = dropdownValue === "" ? false : true;
     const isValid =
       fieldValues.email &&
       fieldValues.name &&
       fieldValues.zipcode &&
-      dropdown &&
+      dropdown && cardValid
       Object.values(errors).every((x) => x === "");
 
     return isValid;
@@ -170,12 +181,14 @@ const PaymentForm = ({ calculatedAmount }) => {
             Card Information
           </Typography>
         </Box>
-        <StripeElement element={CardNumberElement} icon="card" />
+        <StripeElement onErrorChange={handleStripeElementError} element={CardNumberElement} name="card" icon="card" />
         <div styleName="horizontal">
-          <StripeElement element={CardExpiryElement} width="150px" />
+          <StripeElement onErrorChange={handleStripeElementError} element={CardExpiryElement} name=""width="150px" name='cardExpire' />
           <StripeElement
             className={classes.cvc}
+            name="cvc"
             element={CardCvcElement}
+            onErrorChange={handleStripeElementError}
             icon="cvc"
             width="112px"
           />

src/routes/CreateNewTeam/pages/CreateTaasPayment/StripeElement/index.jsx

@@ -3,9 +3,14 @@ import TextField from "@material-ui/core/TextField";
 import Box from "@material-ui/core/Box";
 import StripeInput from "./StripeInput";
 
-function StripeElement({ element, icon, width }) {
+function StripeElement({ onErrorChange, element, icon, width, name }) {
   const [errorMessage, setErrorMessage] = React.useState(null);
-  function handleElementChange({ error, elementType }) {
+  function handleElementChange({empty, complete, error, elementType }) {
+    if (!complete || error || empty) {
+      onErrorChange(name, true)
+    }else {
+      onErrorChange(name, false)
+    }
     if (error) {
       if (elementType === "cardNumber") {
         setErrorMessage("Credit card incomplete");
@@ -24,7 +29,6 @@ function StripeElement({ element, icon, width }) {
         variant="outlined"
         error={hasError}
         helperText={hasError ? errorMessage || "Invalid" : ""}
-        onBlur={handleElementChange}
         onChange={handleElementChange}
         size="small"
         style={{ width }}

src/routes/CreateNewTeam/pages/CreateTaasPayment/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from "react";
+import _ from "lodash";
 import { useSelector } from "react-redux";
 import { Elements } from "@stripe/react-stripe-js";
 import { loadStripe } from "@stripe/stripe-js";
@@ -19,7 +20,7 @@ const CreateTassPayment = () => {
   const [calculatedAmount, setCalculatedAmount] = useState(0);
   const [error, setError] = useState(false);
   const [value, setValue] = useState([]);
-  const { addedRoles } = useSelector((state) => state.searchedRoles);
+  const { addedRoles, teamObject } = useSelector((state) => state.searchedRoles );
 
   useEffect(() => {
     const temp = [];
@@ -30,10 +31,12 @@ const CreateTassPayment = () => {
         imageUrl,
         name,
         rates: [rates],
+      } = role;
+      const {
         numberOfResources = 1,
         durationWeeks = 4,
         hoursPerWeek,
-      } = role;
+      } = _.find(teamObject.positions, p => p.roleSearchRequestId === role.searchId) || {}
       let rate;
 
       if (hoursPerWeek) {