Merge pull request #471 from yoution/issue-461

fix: issue #461 #464

Author: nikolay83

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

@@ -29,19 +29,19 @@ function SearchAndSubmit(props) {
 
   const matchedSkills = useMemo(() => {
     if (skills && matchingRole && matchingRole.matchedSkills) {
-      return _.map(matchingRole.matchedSkills, (s) =>
+      return _.compact(_.map(matchingRole.matchedSkills, (s) =>
         _.find(skills, (skill) => skill.name === s)
-      );
+      ));
     } else {
       return [];
     }
   }, [skills, matchingRole]);
 
   const unMatchedSkills = useMemo(() => {
     if (skills && matchingRole && matchingRole.unMatchedSkills) {
-      return _.map(matchingRole.unMatchedSkills, (s) =>
+      return _.compact(_.map(matchingRole.unMatchedSkills, (s) =>
         _.find(skills, (skill) => skill.name === s)
-      );
+      ));
     } else {
       return [];
     }

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

@@ -8,6 +8,7 @@ import {
   useElements,
 } from "@stripe/react-stripe-js";
 import { navigate } from "@reach/router";
+import _ from "lodash";
 import { toastr } from "react-redux-toastr";
 import { makeStyles } from "@material-ui/core/styles";
 import Typography from "@material-ui/core/Typography";
@@ -19,6 +20,7 @@ import StripeElement from "../StripeElement";
 import FormField from "../FormField";
 import SelectField from "../SelectField";
 import ConfirmationModal from "../../../components/ConfirmationModal";
+import PaymentResultPopup from "../PaymentResultPopup";
 
 import "./styles.module.scss";
 
@@ -50,9 +52,15 @@ const PaymentForm = ({ calculatedAmount }) => {
   const [formValues, setFormValues] = useState(initialFormValues);
   const [dropdownValue, setDropdownValue] = useState("");
   const [processing, setProcessing] = useState(false);
+  const [showPaymentResultPopup, setShowPaymentResultPopup] = useState(false);
   const [requestLoading, setRequestLoading] = useState(false);
-  const [errors, setErrors] = useState({card: true, cardExpire: true, cardCvc: true});
+  const [errors, setErrors] = useState({
+    card: true,
+    cardExpire: true,
+    cardCvc: true,
+  });
   const [clicked, setClicked] = useState(true);
+  const [projectId, setProjectId] = useState(null);
   const stripe = useStripe();
   const elements = useElements();
   const dispatch = useDispatch();
@@ -86,11 +94,11 @@ const PaymentForm = ({ calculatedAmount }) => {
     });
   };
   const handleStripeElementError = (fieldName, error) => {
-    errors[fieldName] = error ? true: false
+    errors[fieldName] = error ? true : false;
     setErrors({
       ...errors,
     });
-  }
+  };
   const handleInputValue = (e) => {
     const { name, value } = e.target;
     setFormValues({
@@ -101,6 +109,11 @@ const PaymentForm = ({ calculatedAmount }) => {
       [name]: value,
     });
   };
+  const goToTassProject = () => {
+    dispatch(clearSearchedRoles());
+    setShowPaymentResultPopup(false);
+    navigate(`/taas/myteams/${projectId}`);
+  };
   const handleFormSubmit = async (e) => {
     e.preventDefault();
     if (formIsValid() && clicked) {
@@ -130,12 +143,9 @@ const PaymentForm = ({ calculatedAmount }) => {
             toastr.success("Payment is successful");
             setRequestLoading(true);
             postTeamRequest(teamObject)
-              .then(() => {
-                setTimeout(() => {
-                  dispatch(clearSearchedRoles());
-                  // Backend api create project has sync issue, so delay 2 seconds
-                  navigate("/taas/myteams");
-                }, 2000);
+              .then((res) => {
+                setProjectId(_.get(res, "data.projectId"));
+                setShowPaymentResultPopup(true);
               })
               .catch((err) => {
                 setRequestLoading(false);
@@ -154,14 +164,16 @@ const PaymentForm = ({ calculatedAmount }) => {
 
   const formIsValid = (fieldValues = formValues) => {
     // check card valid
-    const cardValid = !errors['card'] && !errors['cardExpire'] && !errors['cvc']
+    const cardValid =
+      !errors["card"] && !errors["cardExpire"] && !errors["cvc"];
     const dropdown = dropdownValue === "" ? false : true;
     const isValid =
       fieldValues.email &&
       fieldValues.name &&
       fieldValues.zipcode &&
-      dropdown && cardValid
-      Object.values(errors).every((x) => x === "");
+      dropdown &&
+      cardValid;
+    Object.values(errors).every((x) => x === "");
 
     return isValid;
   };
@@ -181,9 +193,20 @@ const PaymentForm = ({ calculatedAmount }) => {
             Card Information
           </Typography>
         </Box>
-        <StripeElement onErrorChange={handleStripeElementError} element={CardNumberElement} name="card" icon="card" />
+        <StripeElement
+          onErrorChange={handleStripeElementError}
+          element={CardNumberElement}
+          name="card"
+          icon="card"
+        />
         <div styleName="horizontal">
-          <StripeElement onErrorChange={handleStripeElementError} element={CardExpiryElement} name=""width="150px" name='cardExpire' />
+          <StripeElement
+            onErrorChange={handleStripeElementError}
+            element={CardExpiryElement}
+            name=""
+            width="150px"
+            name="cardExpire"
+          />
           <StripeElement
             className={classes.cvc}
             name="cvc"
@@ -217,6 +240,13 @@ const PaymentForm = ({ calculatedAmount }) => {
         </button>
       </form>
       <ConfirmationModal open={requestLoading} isLoading={requestLoading} />
+      <PaymentResultPopup
+        open={showPaymentResultPopup}
+        onContinueClick={goToTassProject}
+        onClose={() => {
+          setShowPaymentResultPopup(false);
+        }}
+      />
     </>
   );
 };

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

@@ -0,0 +1,65 @@
+/**
+ * Payment result popup
+ */
+import React, { useState, useEffect } from "react";
+import PT from "prop-types";
+import { useInterval } from "react-use";
+import Button from "components/Button";
+import BaseCreateModal from "../../../components/BaseCreateModal";
+import "./styles.module.scss";
+
+function PaymentResultPopup({ open, onClose, onContinueClick }) {
+  const [second, setSecond] = useState(10);
+  useInterval(
+    () => {
+      setSecond(second - 1);
+    },
+    second > 0 ? 1000 : null
+  );
+  useEffect(() => {
+    if (second === 0) {
+      onContinueClick();
+    }
+  }, [second, onContinueClick]);
+
+  const Buttons = (
+    <div styleName="button-contaier">
+      <Button
+        type="primary"
+        size="medium"
+        styleName="continue-button"
+        onClick={onContinueClick}
+      >
+        TAKE ME TO MY TEAM
+      </Button>
+      <div styleName="time-label">
+        You will be automatically redirected in{" "}
+        {second === 0 || second === 10 ? second : "0" + second} seconds
+      </div>
+    </div>
+  );
+
+  return (
+    <BaseCreateModal
+      open={open}
+      onClose={onClose}
+      maxWidth="560px"
+      buttons={Buttons}
+    >
+      <h1 styleName="header">WE'VE RECEIVED YOUR DEPOSIT</h1>
+      <div styleName="sub-header">
+        Thanks for trusting us with your talent needs! You will be redirected to
+        your Team page where you can review candidates, schedule interviews, and
+        lock in your selections.
+      </div>
+    </BaseCreateModal>
+  );
+}
+
+PaymentResultPopup.propTypes = {
+  open: PT.bool,
+  onClose: PT.func,
+  onContinueClick: PT.func,
+};
+
+export default PaymentResultPopup;

src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentResultPopup/styles.module.scss

@@ -0,0 +1,44 @@
+@import "styles/include";
+
+.header {
+    margin-top: -30px;
+    background-color: #ffffff;
+    background-image: linear-gradient(
+90deg
+, #9D41C9, #EF476F);
+    background-size: 100%;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-family: BarlowCondensed;
+    font-size: 34px;
+    line-height: 38px;
+    text-align: center;
+}
+
+.sub-header {
+  @include font-roboto;
+  margin-top: 20px;
+  color: #2A2A2A;
+  font-size: 16px;
+  line-height: 26px;
+  text-align: center;
+}
+
+.button-contaier {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .time-label {
+    @include font-roboto;
+    margin-top: 10px;
+    color: #2A2A2A;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+  }
+}
+
+.continue-button:disabled {
+  background-color: #997b7be6;
+}