diff --git a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx index ba9c16d..f2b58cf 100644 --- a/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx +++ b/src/routes/CreateNewTeam/components/SearchAndSubmit/index.jsx @@ -29,9 +29,9 @@ 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 []; } @@ -39,9 +39,9 @@ function SearchAndSubmit(props) { 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 []; } diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx index 3924407..5a84ec3 100644 --- a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentForm/index.jsx +++ b/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) { @@ -128,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); @@ -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 - +
- + { + { + setShowPaymentResultPopup(false); + }} + /> ); }; diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentResultPopup/index.jsx b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentResultPopup/index.jsx new file mode 100644 index 0000000..59c5cd7 --- /dev/null +++ b/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 = ( +
+ +
+ You will be automatically redirected in{" "} + {second === 0 || second === 10 ? second : "0" + second} seconds +
+
+ ); + + return ( + +

WE'VE RECEIVED YOUR DEPOSIT

+
+ 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. +
+ + ); +} + +PaymentResultPopup.propTypes = { + open: PT.bool, + onClose: PT.func, + onContinueClick: PT.func, +}; + +export default PaymentResultPopup; diff --git a/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentResultPopup/styles.module.scss b/src/routes/CreateNewTeam/pages/CreateTaasPayment/PaymentResultPopup/styles.module.scss new file mode 100644 index 0000000..669557f --- /dev/null +++ b/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; +}