Skip to content
This repository was archived by the owner on Mar 13, 2025. It is now read-only.

Commit a6c6feb

Browse files
mbaghelmbaghel
committed
- New Success Card to use on return from login
- Documentation and cleanup
1 parent cef5b5a commit a6c6feb

File tree

6 files changed

+167
-15
lines changed

6 files changed

+167
-15
lines changed

‎src/routes/CreateNewTeam/components/ConfirmationModal/index.jsx‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
/**
2+
* Confirmation Modal
3+
* Final popup to accept user's agreement to
4+
* commitment and confirm submission of request.
5+
*/
16
import React, { useState } from "react";
2-
import PropTypes from "prop-types";
7+
import PT from "prop-types";
38
import BaseCreateModal from "../BaseCreateModal";
49
import Button from "components/Button";
510
import "./styles.module.scss";
@@ -13,7 +18,12 @@ function ConfirmationModal({ open, onClose, onSubmit, isLoading }) {
1318
};
1419

1520
const confirmButton = (
16-
<Button type="primary" size="medium" disabled={!agreed} onClick={onSubmit}>
21+
<Button
22+
type="primary"
23+
size="medium"
24+
disabled={!agreed || isLoading}
25+
onClick={onSubmit}
26+
>
1727
Confirm
1828
</Button>
1929
);
@@ -52,6 +62,11 @@ function ConfirmationModal({ open, onClose, onSubmit, isLoading }) {
5262
);
5363
}
5464

55-
ConfirmationModal.propTypes = {};
65+
ConfirmationModal.propTypes = {
66+
open: PT.bool,
67+
onClose: PT.func,
68+
onSubmit: PT.func,
69+
isLoading: PT.bool,
70+
};
5671

5772
export default ConfirmationModal;

‎src/routes/CreateNewTeam/components/ItemList/index.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useState } from "react";
2-
import PropTypes from "prop-types";
2+
import PT from "prop-types";
33
import { useDebounce } from "react-use";
44
import { INPUT_DEBOUNCE_DELAY } from "constants/";
55
import PageHeader from "components/PageHeader";
@@ -66,6 +66,12 @@ function ItemList({
6666
);
6767
}
6868

69-
ItemList.propTypes = {};
69+
ItemList.propTypes = {
70+
filterItems: PT.func,
71+
title: PT.string,
72+
filterPlaceholder: PT.string,
73+
subtitle: PT.string,
74+
children: PT.node,
75+
};
7076

7177
export default ItemList;

‎src/routes/CreateNewTeam/components/SubmitContainer/index.jsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
/**
2+
* Submit Container
3+
* Container for the submission flow.
4+
* Requires authentication to complete submission process
5+
* and contains a series of popups to lead user through the flow.
6+
*/
17
import React, { useCallback, useEffect, useState } from "react";
2-
import PropTypes from "prop-types";
8+
import PT from "prop-types";
39
import { useDispatch, useSelector } from "react-redux";
410
import _ from "lodash";
511
import { toastr } from "react-redux-toastr";
@@ -11,11 +17,11 @@ import AddAnotherModal from "../AddAnotherModal";
1117
import TeamDetailsModal from "../TeamDetailsModal";
1218
import ConfirmationModal from "../ConfirmationModal";
1319
import withAuthentication from "../../../../hoc/withAuthentication";
14-
import NoMatchingProfilesResultCard from "../NoMatchingProfilesResultCard";
1520
import "./styles.module.scss";
1621
import { setCurrentStage } from "utils/helpers";
1722
import { clearSearchedRoles, replaceSearchedRoles } from "../../actions";
1823
import { postTeamRequest } from "services/teams";
24+
import SuccessCard from "../SuccessCard";
1925

2026
const retrieveRoles = () => {
2127
const searchIdString = sessionStorage.getItem("searchIds");
@@ -127,11 +133,7 @@ function SubmitContainer({
127133

128134
return (
129135
<div styleName="page">
130-
{matchingRole ? (
131-
<ResultCard role={matchingRole} />
132-
) : (
133-
<NoMatchingProfilesResultCard />
134-
)}
136+
{matchingRole ? <ResultCard role={matchingRole} /> : <SuccessCard />}
135137
<div styleName="right-side">
136138
<AddedRolesAccordion addedRoles={addedRoles} />
137139
<Completeness
@@ -165,6 +167,12 @@ function SubmitContainer({
165167
);
166168
}
167169

168-
SubmitContainer.propTypes = {};
170+
SubmitContainer.propTypes = {
171+
stages: PT.array,
172+
setStages: PT.func,
173+
completenessStyle: PT.string,
174+
reloadRolesPage: PT.bool,
175+
location: PT.object,
176+
};
169177

170178
export default withAuthentication(SubmitContainer);

‎src/routes/CreateNewTeam/components/SuccessCard/index.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/**
2+
* Success Card
3+
* Card to show after returning from login in submit
4+
* new team request flow. Shows success state, but does
5+
* not require receiving props
6+
*/
7+
import React from "react";
8+
import { Link } from "@reach/router";
9+
import IconEarthCheck from "../../../../assets/images/icon-earth-check.svg";
10+
import Curve from "../../../../assets/images/curve.svg";
11+
import { MATCHING_RATE } from "constants";
12+
import "./styles.module.scss";
13+
import Button from "components/Button";
14+
15+
function SuccessCard() {
16+
return (
17+
<div styleName="result-card">
18+
<div styleName="heading">
19+
<IconEarthCheck />
20+
<h3>We have matching profiles</h3>
21+
<p>
22+
We have qualified candidates who match {MATCHING_RATE}% or more of
23+
your job requirements.
24+
</p>
25+
<Curve styleName="curve" />
26+
<IconEarthCheck styleName="transparent-icon" />
27+
</div>
28+
<div styleName="content">
29+
<p styleName="info-txt">
30+
Please use the button to the right to submit your request, or the
31+
button below to search for additional roles.
32+
</p>
33+
<Link to="/taas/myteams/createnewteam" state={{ keepAddedRoles: true }}>
34+
<Button type="secondary" styleName="button">
35+
Continue Search
36+
</Button>
37+
</Link>
38+
</div>
39+
</div>
40+
);
41+
}
42+
43+
export default SuccessCard;

‎src/routes/CreateNewTeam/components/SuccessCard/styles.module.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
@import "styles/include";
2+
3+
.result-card {
4+
@include rounded-card;
5+
max-width: 746px;
6+
width: 50vw;
7+
margin-right: 30px;
8+
}
9+
10+
.heading {
11+
display: flex;
12+
flex-direction: column;
13+
justify-content: flex-start;
14+
align-items: center;
15+
padding: 30px 0 60px 0;
16+
margin-bottom: 30px;
17+
color: #fff;
18+
background-image: linear-gradient(225deg, #0ab88a 0%, #137d60 100%);
19+
position: relative;
20+
text-align: center;
21+
border-radius: 8px 8px 0 0;
22+
23+
svg {
24+
margin-bottom: 8px;
25+
g {
26+
stroke: #fff;
27+
}
28+
}
29+
30+
h3 {
31+
@include font-barlow-condensed;
32+
text-transform: uppercase;
33+
font-size: 34px;
34+
margin-bottom: 8px;
35+
font-weight: 500;
36+
}
37+
}
38+
39+
.content {
40+
display: flex;
41+
flex-direction: column;
42+
align-items: center;
43+
padding-bottom: 61px;
44+
p.info-txt {
45+
@include font-roboto;
46+
font-size: 14px;
47+
line-height: 22px;
48+
width: 357px;
49+
text-align: center;
50+
}
51+
.button {
52+
margin-top: 240px;
53+
}
54+
}
55+
56+
.curve {
57+
position: absolute;
58+
left: 0;
59+
bottom: -70px;
60+
width: 100%;
61+
}
62+
63+
.transparent-icon {
64+
position: absolute;
65+
top: -40px;
66+
right: 10px;
67+
opacity: 12%;
68+
height: 142px;
69+
width: 142px;
70+
}

‎src/routes/CreateNewTeam/components/TeamDetailsModal/index.jsx‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
import React, { useMemo, useState } from "react";
1+
/**
2+
* Team Details Modal
3+
* Popup form to enter details about the
4+
* team request before submitting.
5+
*/
6+
import React, { useState } from "react";
27
import PT from "prop-types";
38
import { Form, Field, useField } from "react-final-form";
49
import FormField from "components/FormField";
@@ -205,6 +210,11 @@ function TeamDetailsModal({ open, onClose, submitForm, addedRoles }) {
205210
);
206211
}
207212

208-
TeamDetailsModal.propTypes = {};
213+
TeamDetailsModal.propTypes = {
214+
open: PT.bool,
215+
onClose: PT.func,
216+
submitForm: PT.func,
217+
addedRoles: PT.array,
218+
};
209219

210220
export default TeamDetailsModal;

0 commit comments

Comments
 (0)