Skip to content

Commit a7d1778

Browse files
BohdanMarchuk-sigmaBohdanMarchuk-sigma
committed
1. Fixes from Andriy code review - props deconstruction and moving bootstrap. 2. Added loader and made trigger URL as a button.
1 parent 3f8c86f commit a7d1778

File tree

27 files changed

+276
-204
lines changed

27 files changed

+276
-204
lines changed

‎client/index.html‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>MyMaestro</title>
8-
<link rel="icon" type="image/x-icon" href="./src/assets/img/favicon.png">
9-
</head>
10-
<body>
11-
<div id="root"></div>
12-
<script type="module" src="/src/main.jsx"></script>
13-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
14-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
15-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
16-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>MyMaestro</title>
7+
<link rel="icon" type="image/x-icon" href="./src/assets/img/favicon.png">
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
1713
</html>

‎client/package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@popperjs/core": "^2.11.8",
1314
"@reduxjs/toolkit": "^2.2.5",
1415
"@vitejs/plugin-react": "^4.2.1",
1516
"axios": "^1.7.2",

‎client/src/assets/text.json‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,121 @@
77
"footer": {
88
"title": "DocuSign: it’s time to agree better",
99
"paragraph": "DocuSign helps organizations connect and automate how they prepare, sign, act on, and manage agreements.",
10-
"copyright": "© 2023 DocuSign Inc.",
10+
"copyright": "© 2024 DocuSign Inc.",
1111
"createButton": "Create developer account",
1212
"learnButton": "Learn more ->"
1313
}
1414
},
15+
"login": {
16+
"acg": "Authorization Code Grant",
17+
"acgDescription": "This authentication type provides functionality of creating, triggering and managing workflows.",
18+
"jwt": "JSON Web Token",
19+
"jwtDescription": "This authentication type provides functionality of only triggering and managing workflows."
20+
},
21+
"triggerForm": {
22+
"formTitle": "Fill in details",
23+
"formName": "Participant Information",
24+
"fields": {
25+
"instanceName": "Instance Name",
26+
"signerName": "Signer Name",
27+
"signerEmail": "Signer Email",
28+
"ccName": "CC Name",
29+
"ccEmail": "CC Email"
30+
}
31+
},
32+
"home": {
33+
"card1": {
34+
"title": "'Create a workflow'",
35+
"description": "Create workflow definitions from the dropdown list below"
36+
},
37+
"card2": {
38+
"title": "Trigger a workflow",
39+
"description": "Get list of workflow definitions created and trigger workflows"
40+
},
41+
"card3": {
42+
"title": "Manage a workflow",
43+
"description": "Get list of workflow instances, update their status and cancel them"
44+
}
45+
},
1546
"loader": {
1647
"title": "Waiting for log in",
1748
"paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
1849
},
50+
"behindTheScenes": {
51+
"titles": {
52+
"main": "This sample features",
53+
"code": "Code flow",
54+
"step1": "Step 1",
55+
"step2": "Step 2",
56+
"step3": "Step 3"
57+
},
58+
"descriptions": {
59+
"codeDescription": "See the source code: "
60+
},
61+
"createWorkflow": {
62+
"mainDescription": "- Creation of 1-9 workflow\n - Creation of Offer Letter workflow\n - Creation of NDA workflow",
63+
"step1Description": "Using the Envelopes:list API method, check that template is imported to the account, otherwise give an ability to download needed template.",
64+
"step2Description": "Using the WorkflowManagement:create API method, create a workflow definition with all the data from the template.",
65+
"step3Description": "Using the WorkflowManagement:publish API method, publish the created workflow definition to the account to make it visible and usable."
66+
},
67+
"triggerWorkflow": {
68+
"mainDescription": "- Gets published workflow definitions from the account\n - Gets last run status of workflow definition used in this sample app\n - Triggers workflow definition",
69+
"step1Description": "Using the WorkflowManagement:getWorkflowDefinitions API method, gets workflow definitions created on user account and filters last published definitions used in this app.",
70+
"step2Description": "Using the WorkflowTrigger:triggerWorkflow API method, triggers chosen workflow definition with data parsed from the form"
71+
},
72+
"manageWorkflow": {
73+
"mainDescription": "- Gets triggered workflow instances of sample app workflow definitions\n - Gets status of workflow instances created using Trigger Workflow functionality\n - Cancels chosen workflow instance",
74+
"step1Description": "Using the WorkflowInstanceManagement:getWorkflowInstances API method, gets workflow instances triggered from workflow definition used for this sample app and filters only created in this user session4.",
75+
"step2Description": "Using the WorkflowInstanceManagement:getWorkflowInstance API method, gets the status of the chosen workflow instance.",
76+
"step3Description": "Using the WorkflowInstanceManagement:cancelWorkflowInstance API method, cancels the chosen workflow instance."
77+
}
78+
},
79+
"workflowList": {
80+
"doNotHaveWorkflow": "You don't have any workflows",
81+
"columns": {
82+
"lastRunStatus": "Status of last run",
83+
"workflowName": "Workflow name",
84+
"workflowType": "Workflow type"
85+
}
86+
},
87+
"pageTitles": {
88+
"manageWorkflow": "Manage workflows",
89+
"triggerWorkflow": "Trigger a workflow"
90+
},
91+
"popups": {
92+
"workflowTriggered": {
93+
"title": "Workflow Triggered",
94+
"description": "To complete the workflow steps click the button below"
95+
},
96+
"workflowDefinitionCreated": {
97+
"publish": {
98+
"description": "To publish the workflow, proceed with the button below",
99+
"button": "Publish the workflow"
100+
},
101+
"published": {
102+
"title": "Done",
103+
"description": "Workflow successfully published"
104+
},
105+
"error": {
106+
"title": "Workflow creation was unsuccessful",
107+
"button": "Download Template"
108+
}
109+
}
110+
},
111+
"buttons": {
112+
"login": "Log in",
113+
"logout": "Log out",
114+
"behindTheScenes": "Behind the scenes",
115+
"continue": "Continue",
116+
"cancel": "Cancel",
117+
"createWorkflow": "Create a new workflow ->",
118+
"triggerWorkflow": "Trigger workflow",
119+
"triggerNewWorkflow": "Trigger new workflow ->",
120+
"updateWorkflow": "Update workflow status",
121+
"cancelWorkflow": "Cancel workflow",
122+
"getStarted": "Get Started",
123+
"moreInfo": "More Info"
124+
},
19125
"links": {
20126
"github": "https://github.com/docusign/sample-app-mymaestro-node",
21127
"createsandbox": "https://go.docusign.com/o/sandbox/",

‎client/src/components/Card/Card.jsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ import styles from './Card.module.css';
55
import Dropdown from '../Dropdown/Dropdown.jsx';
66
import { WorkflowOptions } from '../../constants.js';
77
import CreateWorkflowMoreinfoPopup from '../Popups/CreateWorkflowMoreInfo/CreateWorkflowMoreInfo.jsx';
8+
import textContent from '../../assets/text.json';
89

9-
const Card = props => {
10+
const Card = ({ img, title, description, linkTo, dropDown, moreInfo }) => {
1011
const [isBtsOpened, setBtsOpened] = useState(false);
1112
const dispatch = useDispatch();
1213
const isOpened = useSelector(state => state.popup.isOpened);
@@ -19,21 +20,21 @@ const Card = props => {
1920
return (
2021
<div className={styles.cardBody}>
2122
<div className={styles.cardContainer}>
22-
<img src={props.img} alt="" />
23-
<h4>{props.title}</h4>
24-
<h5>{props.description}</h5>
25-
{!props.dropDown ? (
26-
<Link to={props.linkTo}>
23+
<img src={img} alt="" />
24+
<h4>{title}</h4>
25+
<h5>{description}</h5>
26+
{!dropDown ? (
27+
<Link to={linkTo}>
2728
<button className="btn btn-secondary" type="button">
28-
Get Started
29+
{textContent.buttons.getStarted}
2930
</button>
3031
</Link>
3132
) : (
3233
<div>
3334
<div className={styles.buttonGroup}>
34-
{props.moreInfo && (
35+
{moreInfo && (
3536
<button className={styles.moreInfo} onClick={togglePopup}>
36-
More Info
37+
{textContent.buttons.moreInfo}
3738
</button>
3839
)}
3940
<Dropdown options={WorkflowOptions} />

‎client/src/components/Dropdown/Dropdown.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
33
import styles from './Dropdown.module.css';
44
import WorkflowCreationPopup from '../Popups/WorkflowDefinitionCreation/WorkflowDefinitionCreation.jsx';
55
import { api } from '../../api';
6+
import textContent from '../../assets/text.json';
67

78
const Dropdown = ({ options }) => {
89
const dispatch = useDispatch();
@@ -37,11 +38,11 @@ const Dropdown = ({ options }) => {
3738
className="btn btn-secondary dropdown-toggle"
3839
type="button"
3940
id="dropdownMenuButton"
40-
data-toggle="dropdown"
41+
data-bs-toggle="dropdown"
4142
aria-haspopup="true"
4243
aria-expanded="false"
4344
>
44-
Get Started
45+
{textContent.buttons.getStarted}
4546
</button>
4647
<div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
4748
{options.map(option => (

‎client/src/components/Header/Header.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const Header = () => {
4242
className="btn btn-secondary dropdown-toggle"
4343
type="button"
4444
id="dropdownMenuButton"
45-
data-toggle="dropdown"
45+
data-bs-toggle="dropdown"
4646
aria-haspopup="true"
4747
aria-expanded="false"
4848
>
@@ -52,7 +52,7 @@ const Header = () => {
5252
<h4>{userName}</h4>
5353
<p>{userEmail}</p>
5454
<button className="dropdown-item" type="button" onClick={handleLogOut}>
55-
Log out
55+
{textContent.buttons.logout}
5656
</button>
5757
</div>
5858
</div>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@
6262
}
6363

6464
.dropDownMenu button, .dropDownMenu button:hover, .dropDownMenu button:active {
65+
padding-left: 1.5rem;
6566
font-size: 16px;
6667
font-weight: 500;
6768
color: var(--secondary-main) !important;

‎client/src/components/LoginForm/LoginForm.jsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import styles from './LoginForm.module.css';
55
import withPopup from '../../hocs/withPopup/withPopup.jsx';
66
import { LoginStatus, ROUTE } from '../../constants.js';
77
import { api } from '../../api';
8+
import textContent from '../../assets/text.json';
89

910
const LoginForm = ({ togglePopup, setLoading }) => {
1011
const [authType, setAuthType] = useState(LoginStatus.ACG);
@@ -52,10 +53,10 @@ const LoginForm = ({ togglePopup, setLoading }) => {
5253
checked={authType === LoginStatus.ACG}
5354
onChange={handleChange}
5455
/>
55-
{LoginStatus.ACG}
56+
{textContent.login.acg}
5657
</label>
5758
<label className={styles.subLabel}>
58-
This authentication type provides functionality of creating, triggering and managing workflows.
59+
{textContent.login.acgDescription}
5960
</label>
6061
</div>
6162
<div className={styles.radioButtonWrapper}>
@@ -67,17 +68,17 @@ const LoginForm = ({ togglePopup, setLoading }) => {
6768
checked={authType === LoginStatus.JWT}
6869
onChange={handleChange}
6970
/>
70-
{LoginStatus.JWT}
71+
{textContent.login.jwt}
7172
</label>
7273
<label className={styles.subLabel}>
73-
This authentication type provides functionality of only triggering and managing workflows.
74+
{textContent.login.jwtDescription}
7475
</label>
7576
</div>
7677
</div>
7778
<div className={styles.formButtons}>
78-
<button type="submit">Log in</button>
79+
<button type="submit">{textContent.buttons.login}</button>
7980
<button className={styles.cancel} type="button" onClick={togglePopup}>
80-
Cancel
81+
{textContent.buttons.cancel}
8182
</button>
8283
</div>
8384
</form>

‎client/src/components/Popups/CreateWorkflowMoreInfo/CreateWorkflowMoreInfo.jsx‎

Lines changed: 15 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,25 @@
11
import styles from './CreateWorkflowMoreInfo.module.css';
22
import withPopup from '../../../hocs/withPopup/withPopup.jsx';
3+
import textContent from '../../../assets/text.json';
34

45
const CreateWorkflowMoreinfo = () => {
56
return (
67
<div className={styles.popupContainer}>
7-
<h2>Behind the scenes</h2>
8+
<h2>{textContent.buttons.behindTheScenes}</h2>
89
<div className={styles.behindTheScenes}>
9-
<h4>This sample features</h4>
10-
<p>
11-
Employee completes ID verification
12-
Employee fills out web form with their information
13-
Data from the web form is used to populate the I-9 document
14-
Employee completes the I-9 document with embedded signing
15-
HR approver completes the document
16-
</p>
17-
<h4>Step 1 Creating workflow</h4>
18-
<p>After the form is submitted, call the
19-
AccountBrands:list
20-
method on the account to check
21-
if the brand you want to create already exists.
22-
If it does, find the corresponding brand ID. If not,
23-
call the
24-
AccountBrands:create
25-
method to create a
26-
new brand.
27-
The brand ID is then stored for the next step.
28-
</p>
29-
<h4>Step 2</h4>
30-
<p>Create an envelope definition with all of the envelope data, including the form information, brand data,
31-
tabs for form fields, documents to sign, and recipients.
32-
Place different types of tabs on the documents as part of the Signers. The tab elements are positioned using
33-
x/y coordinates on the Documents.
34-
Since the first signer is using embedded signing, you must also set the clientUserId property for that
35-
signer recipient.
36-
</p>
37-
<h4>Step 3</h4>
38-
<p>Using the
39-
Envelopes:create
40-
API method, create
41-
and immediately send the envelope with the
42-
envelope definition made from the previous step. The returned envelopeId is then stored for use in the
43-
next step.
44-
</p>
10+
<h4>{textContent.behindTheScenes.titles.main}</h4>
11+
<p>{textContent.behindTheScenes.createWorkflow.mainDescription}</p>
12+
<h4>{textContent.behindTheScenes.titles.code}</h4>
13+
<div style={{ display: 'flex', flexDirection: 'row', marginBottom: '-0.5rem' }}>
14+
<p>{textContent.behindTheScenes.descriptions.codeDescription}</p> <a target="_blank" rel="noreferrer"
15+
href={'https://github.com/docusign/sample-app-mymaestro-node/blob/main/server/controllers/workflowsController.js'}>Controller</a>
16+
</div>
17+
<h4>{textContent.behindTheScenes.titles.step1}</h4>
18+
<p>{textContent.behindTheScenes.createWorkflow.step1Description}</p>
19+
<h4>{textContent.behindTheScenes.titles.step2}</h4>
20+
<p>{textContent.behindTheScenes.createWorkflow.step2Description}</p>
21+
<h4>{textContent.behindTheScenes.titles.step3}</h4>
22+
<p>{textContent.behindTheScenes.createWorkflow.step3Description}</p>
4523
</div>
4624
</div>
4725
);

0 commit comments

Comments
 (0)