Merge branch 'dev' into dev

Author: Arpit Chaudhari

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,13 +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 [clicked, setClicked] = useState(true);
+  const [projectId, setProjectId] = useState(null);
   const stripe = useStripe();
   const elements = useElements();
   const dispatch = useDispatch();
@@ -105,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) {
@@ -132,14 +141,11 @@ const PaymentForm = ({ calculatedAmount }) => {
             toastr.error("Payment failed", payload.error.message);
           } else if (payload.paymentIntent.status === "succeeded") {
             toastr.success("Payment is successful");
-            setRequestLoading(true);
+            // 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);
@@ -233,10 +239,14 @@ const PaymentForm = ({ calculatedAmount }) => {
           {processing ? "Payment Processing" : `Pay $${calculatedAmount}`}
         </button>
       </form>
-      <ConfirmationModal
-        open={requestLoading}
-        isLoading={requestLoading}
-        loadingMessage="Creating A New Team"
+
+      <ConfirmationModal open={requestLoading} isLoading={requestLoading}  loadingMessage="Creating A New Team"/>
+      <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;
+}