Skip to content

Commit 0a8cefe

Browse files
astleyzastleyz
committed
Finish NDA & Offer-Letter workflows
Add forms for each workflow
1 parent 5a9ad5a commit 0a8cefe

22 files changed

+637
-11629
lines changed

‎client/src/api/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -112,9 +112,9 @@ export const api = Object.freeze({
112112
throw error;
113113
}
114114
},
115-
triggerWorkflow: async (workflowId, body) => {
115+
triggerWorkflow: async (workflowId, templateType, body) => {
116116
try {
117-
const response = await instance.put(`/workflows/${workflowId}/trigger`, body);
117+
const response = await instance.put(`/workflows/${workflowId}/trigger?type=${templateType}`, body);
118118
return response;
119119
} catch (error) {
120120
console.log(error);
@@ -134,7 +134,7 @@ export const api = Object.freeze({
134134
},
135135
downloadWorkflowTemplate: async templateName => {
136136
try {
137-
const response = await fetch(`/workflows/download/${templateName}`);
137+
const response = await fetch(`${apiUrl}/workflows/download/${templateName}`);
138138
const blob = await response.blob();
139139
const url = window.URL.createObjectURL(blob);
140140
const a = document.createElement('a');

‎client/src/components/TriggerForm/TriggerForm.jsx‎

Lines changed: 62 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,58 @@ import { useNavigate } from 'react-router-dom';
33
import { useDispatch, useSelector } from 'react-redux';
44
import styles from './TriggerForm.module.css';
55
import WorkflowTriggerResultPopup from '../Popups/WorkflowTriggerResult/WorkflowTriggerResult.jsx';
6-
import textContent from '../../assets/text.json';
7-
import { ROUTE } from '../../constants.js';
6+
import { triggerForm, buttons } from '../../assets/text.json';
7+
import { ROUTE, TemplateType } from '../../constants.js';
88
import { api } from '../../api';
99
import { openPopupWindow, closePopupWindow, updateWorkflowDefinitions } from '../../store/actions';
1010

11-
const TriggerForm = ({ workflowId }) => {
11+
const TriggerForm = ({ workflowId, templateType }) => {
1212
const dispatch = useDispatch();
1313
const navigate = useNavigate();
1414
const isPopupOpened = useSelector(state => state.popup.isOpened);
1515
const workflows = useSelector(state => state.workflows.workflows);
16-
const [instanceName, setInstanceName] = useState('');
17-
const [signerName, setSignerName] = useState('');
18-
const [signerEmail, setSignerEmail] = useState('');
19-
const [ccName, setCcName] = useState('');
20-
const [ccEmail, setCcEmail] = useState('');
2116
const [isDataSending, setDataSending] = useState(false);
2217
const [workflowInstanceUrl, setWorkflowInstanceUrl] = useState('');
18+
const [i9Form, setI9Form] = useState([
19+
{ fieldHeader: 'Preparer Name', fieldName: 'preparerName', value: '' },
20+
{ fieldHeader: 'Preparer Email', fieldName: 'preparerEmail', value: '' },
21+
{ fieldHeader: 'Employee Name', fieldName: 'employeeName', value: '' },
22+
{ fieldHeader: 'Employee Email', fieldName: 'employeeEmail', value: '' },
23+
{ fieldHeader: 'HR Approver Name', fieldName: 'hrApproverName', value: '' },
24+
{ fieldHeader: 'HR Approver Email', fieldName: 'hrApproverEmail', value: '' },
25+
]);
26+
const [offerLetterForm, setOfferLetterForm] = useState([
27+
{ fieldHeader: 'HR Manager Name', fieldName: 'hrManagerName', value: '' },
28+
{ fieldHeader: 'HR Manager Email', fieldName: 'hrManagerEmail', value: '' },
29+
{ fieldHeader: 'Company', fieldName: 'Company', value: '' },
30+
]);
31+
const [ndaForm, setNdaForm] = useState([
32+
{ fieldHeader: 'HR Manager Name', fieldName: 'hrManagerName', value: '' },
33+
{ fieldHeader: 'HR Manager Email', fieldName: 'hrManagerEmail', value: '' },
34+
]);
35+
36+
let relevantForm = [];
37+
let relevantSetter = null;
38+
switch (templateType) {
39+
case TemplateType.I9.type:
40+
relevantForm = i9Form;
41+
relevantSetter = setI9Form;
42+
break;
43+
case TemplateType.OFFER.type:
44+
relevantForm = offerLetterForm;
45+
relevantSetter = setOfferLetterForm;
46+
break;
47+
case TemplateType.NDA.type:
48+
relevantForm = ndaForm;
49+
relevantSetter = setNdaForm;
50+
break;
51+
}
52+
53+
const handleChange = (idx, event) => {
54+
const newRelevantForm = [...relevantForm];
55+
newRelevantForm[idx].value = event.target.value;
56+
relevantSetter(newRelevantForm);
57+
};
2358

2459
const handleCloseTriggerPopup = () => {
2560
dispatch(closePopupWindow());
@@ -29,16 +64,18 @@ const TriggerForm = ({ workflowId }) => {
2964
const handleSubmit = async event => {
3065
event.preventDefault();
3166

32-
const body = {
33-
instanceName,
34-
signerEmail,
35-
signerName,
36-
ccEmail,
37-
ccName,
38-
};
67+
const body = relevantForm.reduce((acc, current) => {
68+
acc[current.fieldName] = current.value;
69+
return acc;
70+
}, {});
71+
72+
if (!Object.keys(body).length) {
73+
navigate(ROUTE.TRIGGER);
74+
return;
75+
}
3976

4077
setDataSending(true);
41-
const { data: triggeredWorkflow } = await api.workflows.triggerWorkflow(workflowId, body);
78+
const { data: triggeredWorkflow } = await api.workflows.triggerWorkflow(workflowId, templateType, body);
4279
setWorkflowInstanceUrl(triggeredWorkflow.workflowInstanceUrl);
4380

4481
// Update workflowDefinitions. "...workflow" creates new workflow-object to avoid mutation in redux
@@ -54,49 +91,26 @@ const TriggerForm = ({ workflowId }) => {
5491

5592
dispatch(updateWorkflowDefinitions(updatedWorkflowDefinitions));
5693
setDataSending(false);
57-
58-
setInstanceName('');
59-
setSignerName('');
60-
setSignerEmail('');
61-
setCcName('');
62-
setCcEmail('');
6394
dispatch(openPopupWindow());
6495
};
6596

6697
return (
6798
<div className={styles.formContainer}>
68-
<h2>{textContent.triggerForm.formTitle}</h2>
99+
<h2>{triggerForm.formTitle}</h2>
69100
<div className={styles.divider} />
70101
<form className={styles.triggerForm} onSubmit={handleSubmit}>
71-
<h3>{textContent.triggerForm.formName}</h3>
72-
<div>
73-
<label>{textContent.triggerForm.fields.instanceName}</label>
74-
<input type="text" value={instanceName} onChange={e => setInstanceName(e.target.value)} required={true} />
75-
</div>
76-
77-
<div>
78-
<label>{textContent.triggerForm.fields.signerName}</label>
79-
<input type="text" value={signerName} onChange={e => setSignerName(e.target.value)} required={true} />
80-
</div>
81-
82-
<div>
83-
<label>{textContent.triggerForm.fields.signerEmail}</label>
84-
<input type="text" value={signerEmail} onChange={e => setSignerEmail(e.target.value)} required={true} />
85-
</div>
86-
87-
<div>
88-
<label>{textContent.triggerForm.fields.ccName}</label>
89-
<input type="text" value={ccName} onChange={e => setCcName(e.target.value)} required={true} />
90-
</div>
102+
<h3>{triggerForm.formName}</h3>
91103

92-
<div>
93-
<label>{textContent.triggerForm.fields.ccEmail}</label>
94-
<input type="text" value={ccEmail} onChange={e => setCcEmail(e.target.value)} required={true} />
95-
</div>
104+
{relevantForm.map((formItem, idx) => (
105+
<div key={formItem.fieldHeader}>
106+
<label>{formItem.fieldHeader}</label>
107+
<input type="text" value={formItem.value} onChange={e => handleChange(idx, e)} required={true} />
108+
</div>
109+
))}
96110

97111
<div className={styles.divider} />
98112
<button className="btn btn-primary" type="submit" disabled={isDataSending}>
99-
<span className="sr-only">{textContent.buttons.continue}</span>
113+
<span className="sr-only">{buttons.continue}</span>
100114
{isDataSending ? <span className="spinner-border spinner-border-sm" /> : null}
101115
</button>
102116
</form>

‎client/src/components/TriggerForm/TriggerForm.module.css‎

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
.formContainer {
2-
margin-top: 6.25rem;
3-
min-height: 67vh;
4-
height: 100%;
5-
margin-right: 10rem;
2+
margin: 6rem 10rem 0 0;
3+
padding: 0 0 1rem 3rem;
64
width: 50%;
75
min-width: 500px;
86
background-color: var(--white-main);
@@ -18,16 +16,7 @@
1816
line-height: 28px;
1917
font-weight: 600;
2018
width: 100%;
21-
margin: 3rem 0 1.5rem 3rem;
22-
}
23-
24-
.formContainer h3 {
25-
color: var(--black-main);
26-
font-size: 18px;
27-
line-height: 24px;
28-
font-weight: 500;
29-
width: 100%;
30-
margin: 1.5rem 0 0 3rem;
19+
margin-top: 3rem;
3120
}
3221

3322
.divider {
@@ -40,12 +29,20 @@
4029
display: flex;
4130
flex-direction: column;
4231
gap: 1rem;
32+
margin-top: 1.5rem;
33+
}
34+
35+
.triggerForm h3 {
36+
color: var(--black-main);
37+
font-size: 18px;
38+
line-height: 24px;
39+
font-weight: 500;
40+
width: 100%;
4341
}
4442

4543
.triggerForm input,
4644
label {
4745
display: block;
48-
margin: 0 0 0 3rem;
4946
}
5047

5148
.triggerForm label {
@@ -71,6 +68,7 @@ label {
7168
}
7269

7370
.triggerForm button {
71+
margin: 0.5rem 2.5rem 0 0;
7472
width: 120px;
7573
height: 40px;
7674
border-radius: 2px;
@@ -80,7 +78,6 @@ label {
8078
font-weight: 500;
8179
line-height: 24px;
8280
align-self: end;
83-
margin-right: 2.5rem;
8481
}
8582

8683
.triggerForm button:disabled {

‎client/src/components/WorkflowList/WorkflowList.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -128,8 +128,8 @@ const WorkflowList = ({ items, interactionType, isLoading }) => {
128128

129129
<div className={styles.list} style={items.length >= 2 ? listStyles : {}}>
130130
{items.map((item, idx) => (
131-
<div key={`${item.name}${idx}`} className="list-group-item list-group-item-action">
132-
<div style={{ display: 'flex', flexDirection: 'row', gap: '16px' }}>
131+
<div key={`${item.name}${idx}`} className={`list-group-item list-group-item-action ${styles.listRow}`}>
132+
<div className={styles.cell1}>
133133
{loadingWorkflow.isLoading && loadingWorkflow.id === item.id ? (
134134
<StatusLoader />
135135
) : (
@@ -140,7 +140,7 @@ const WorkflowList = ({ items, interactionType, isLoading }) => {
140140
<p>{item.type}</p>
141141

142142
{interactionType === WorkflowItemsInteractionType.TRIGGER && (
143-
<button onClick={() => navigate(`${ROUTE.TRIGGERFORM}/${item.id}`)}>
143+
<button onClick={() => navigate(`${ROUTE.TRIGGERFORM}/${item.id}?type=${item.type}`)}>
144144
{textContent.buttons.triggerWorkflow}
145145
</button>
146146
)}

‎client/src/components/WorkflowList/WorkflowList.module.css‎

Lines changed: 33 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
font-size: 16px;
2626
font-weight: 400;
2727
color: var(--black-main);
28+
text-align: left;
2829
}
2930

3031
.listGroup p {
@@ -52,21 +53,47 @@
5253

5354
.list {
5455
max-height: 63.5vh;
56+
padding: 1rem 0;
5557
-webkit-overflow-scrolling: touch;
58+
display: grid;
59+
grid-template-columns: 1fr 1fr 1fr;
60+
width: 100%;
61+
justify-items: normal;
62+
align-items: center;
63+
gap: 14px;
64+
background-color: var(--white-main);
65+
}
66+
67+
.list > .listRow {
68+
display: contents;
5669
}
5770

58-
.list > div {
71+
.list > .listRow > * {
72+
text-align: center;
73+
}
74+
75+
.list > .listRow > *:nth-child(1) {
76+
justify-self: start;
77+
}
78+
79+
.list > .listRow > *:nth-child(2) {
80+
justify-self: center;
81+
}
82+
83+
.list > .listRow > *:nth-child(3) {
84+
justify-self: end;
85+
}
86+
87+
.listRow .cell1 {
5988
display: flex;
60-
justify-content: space-between;
61-
align-items: center;
62-
padding: 17px 20px;
89+
flex-direction: row;
90+
gap: 16px;
6391
}
6492

6593
.headerRow {
6694
display: flex;
6795
flex-direction: row;
6896
width: 100%;
69-
padding-left: 1.25rem;
7097
margin-bottom: 0.5rem;
7198
}
7299

@@ -88,7 +115,7 @@
88115
display: flex;
89116
flex-direction: row;
90117
justify-content: center;
91-
margin-right: 8.75rem;
118+
margin-right: 14rem;
92119
}
93120

94121
.headerAction {

‎client/src/constants.js‎

Lines changed: 9 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,29 +24,25 @@ export const WorkflowStatus = {
2424
};
2525

2626
export const TemplateType = {
27-
I9: '1-9 document',
28-
OFFER: 'Offer letter',
29-
NDA: 'NDA document',
30-
31-
I92: 'MyMaestro: I-9',
32-
OFFER2: 'MyMaestro: Offer Letter',
33-
NDA2: 'MyMaestro: NDA',
27+
I9: { name: 'MyMaestro: I-9', type: '1-9 document' },
28+
OFFER: { name: 'MyMaestro: Offer Letter', type: 'Offer letter' },
29+
NDA: { name: 'MyMaestro: NDA', type: 'NDA document' },
3430
};
3531

3632
export const WorkflowOptions = [
3733
{
38-
value: `Create ${TemplateType.I9}`,
39-
type: TemplateType.I9,
34+
value: `Create ${TemplateType.I9.type}`,
35+
type: TemplateType.I9.type,
4036
message: "You've successfully created a 1-9 workflow",
4137
},
4238
{
43-
value: `Create ${TemplateType.OFFER}`,
44-
type: TemplateType.OFFER,
39+
value: `Create ${TemplateType.OFFER.type}`,
40+
type: TemplateType.OFFER.type,
4541
message: "You've successfully created Offer letter workflow",
4642
},
4743
{
48-
value: `Create ${TemplateType.NDA}`,
49-
type: TemplateType.NDA,
44+
value: `Create ${TemplateType.NDA.type}`,
45+
type: TemplateType.NDA.type,
5046
message: "You've successfully created NDA workflow",
5147
},
5248
];

0 commit comments

Comments
 (0)