Skip to content

Commit 967728c

Browse files
LarryKlugerDSLarryKlugerDS
committed
working
1 parent af194ed commit 967728c

9 files changed

Lines changed: 400 additions & 109 deletions

File tree

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2021-present DocuSign
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
{
22
"name": "react-oauth-docusign",
33
"version": "0.1.0",
4+
"license": "MIT",
5+
"description": "React code example with OAuth Implicit grant and DocuSign API",
6+
"homepage": "https://github.com/docusign/react-oauth-docusign",
47
"private": true,
58
"dependencies": {
69
"@testing-library/jest-dom": "^5.11.4",

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
>
1919
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
2020
<!-- external configuration file. See https://stackoverflow.com/a/55019395/64904 -->
21-
<script src="config.js"></script>
21+
<script src="%PUBLIC_URL%/config.js"></script>
2222
<!--
2323
manifest.json provides metadata used when your web app is installed on a
2424
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

‎src/App.js‎

Lines changed: 144 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,13 @@ import Container from 'react-bootstrap/Container';
33
import Row from 'react-bootstrap/Row';
44
import Col from 'react-bootstrap/Col';
55
import Button from 'react-bootstrap/Button';
6+
import Form from 'react-bootstrap/Form';
67
import Jumbotron from 'react-bootstrap/Jumbotron';
78
import Navbar from 'react-bootstrap/Navbar';
89
import Nav from 'react-bootstrap/Nav';
910
import { ToastContainer, toast } from 'react-toastify';
1011
import OAuthImplicit from './OAuthImplicit';
11-
12+
import DocuSign from './DocuSign';
1213
import './App.css';
1314

1415
class App extends React.Component {
@@ -32,16 +33,18 @@ class App extends React.Component {
3233
responseApiRequestsReset: undefined,
3334
responseSuccess: undefined,
3435
responseTraceId: undefined,
36+
resultsEnvelopeJson: undefined,
3537
formName: '',
3638
formEmail: '',
3739
};
3840
this.oAuthImplicit = new OAuthImplicit(this);
39-
//this.docusign = new DocuSign(this);
41+
this.docusign = new DocuSign(this);
4042
this.logout = this.logout.bind(this);
4143
this.startAuthentication = this.startAuthentication.bind(this);
4244
this.formNameChange = this.formNameChange.bind(this);
4345
this.formEmailChange = this.formEmailChange.bind(this);
4446
this.sendEnvelope = this.sendEnvelope.bind(this);
47+
this.getEnvelope = this.getEnvelope.bind(this);
4548
}
4649

4750
async componentDidMount() {
@@ -124,6 +127,7 @@ class App extends React.Component {
124127
responseApiRequestsReset: undefined,
125128
responseSuccess: undefined,
126129
responseTraceId: undefined,
130+
resultsEnvelopeJson: undefined,
127131
});
128132
}
129133

@@ -155,43 +159,77 @@ class App extends React.Component {
155159
}
156160

157161
async sendEnvelope() {
158-
this.setState({
159-
responseErrorMsg: undefined,
160-
responseEnvelopeId: undefined,
161-
responseAvailableApiRequests: undefined,
162-
responseApiRequestsReset: undefined,
163-
responseSuccess: undefined,
164-
responseTraceId: undefined,
165-
});
166-
if (!this.checkToken()) {
167-
return; // Problem! The user needs to login
168-
}
169-
if (!this.state.formEmail || this.state.formEmail.length < 5) {
170-
toast.error("Problem: Enter the signer's email address");
171-
return;
172-
}
173-
if (!this.state.formName || this.state.formName.length < 5) {
174-
toast.error("Problem: Enter the signer's name");
175-
return;
176-
}
177-
178-
this.setState({ working: true });
179-
const results = await this.docusign.sendEnvelope();
180-
const { apiRequestsReset } = results;
181-
const responseApiRequestsReset = apiRequestsReset
182-
? new Date(apiRequestsReset) : undefined;
183-
this.setState({
184-
working: false,
185-
responseSuccess: results.success,
186-
responseErrorMsg: results.errorMsg,
187-
responseEnvelopeId: results.envelopeId,
188-
responseAvailableApiRequests: results.availableApiRequests,
189-
responseTraceId: results.traceId,
190-
responseApiRequestsReset,
191-
});
162+
this.setState({
163+
responseErrorMsg: undefined,
164+
responseEnvelopeId: undefined,
165+
responseAvailableApiRequests: undefined,
166+
responseApiRequestsReset: undefined,
167+
responseSuccess: undefined,
168+
responseTraceId: undefined,
169+
resultsEnvelopeJson: undefined,
170+
});
171+
if (!this.checkToken()) {
172+
return; // Problem! The user needs to login
173+
}
174+
if (!this.state.formEmail || this.state.formEmail.length < 5) {
175+
toast.error("Problem: Enter the signer's email address");
176+
return;
177+
}
178+
if (!this.state.formName || this.state.formName.length < 5) {
179+
toast.error("Problem: Enter the signer's name");
180+
return;
181+
}
182+
183+
this.setState({ working: true, workingMessage: "Sending envelope" });
184+
const results = await this.docusign.sendEnvelope();
185+
const { apiRequestsReset } = results;
186+
const responseApiRequestsReset = apiRequestsReset
187+
? new Date(apiRequestsReset) : undefined;
188+
this.setState({
189+
working: false,
190+
responseSuccess: results.success,
191+
responseErrorMsg: results.errorMsg,
192+
responseEnvelopeId: results.envelopeId,
193+
responseAvailableApiRequests: results.availableApiRequests,
194+
responseTraceId: results.traceId,
195+
responseApiRequestsReset,
196+
});
192197
}
193198

194-
render() {
199+
async getEnvelope() {
200+
this.setState({
201+
responseErrorMsg: undefined,
202+
responseEnvelopeId: undefined,
203+
responseAvailableApiRequests: undefined,
204+
responseApiRequestsReset: undefined,
205+
responseSuccess: undefined,
206+
responseTraceId: undefined,
207+
});
208+
if (!this.checkToken()) {
209+
return; // Problem! The user needs to login
210+
}
211+
if (!this.state.responseEnvelopeId) {
212+
toast.error("Problem: First send an envelope");
213+
return;
214+
}
215+
216+
this.setState({ working: true, workingMessage: "Fetching the envelope's status" });
217+
const results = await this.docusign.getEnvelope();
218+
const { apiRequestsReset } = results;
219+
const responseApiRequestsReset = apiRequestsReset
220+
? new Date(apiRequestsReset) : undefined;
221+
this.setState({
222+
working: false,
223+
responseSuccess: results.success,
224+
responseErrorMsg: results.errorMsg,
225+
responseAvailableApiRequests: results.availableApiRequests,
226+
responseTraceId: results.traceId,
227+
resultsEnvelopeJson: results.resultsEnvelopeJson,
228+
responseApiRequestsReset,
229+
});
230+
}
231+
232+
render() {
195233
let pagebody;
196234
switch (this.state.page) {
197235
case 'welcome': // not logged in
@@ -250,66 +288,75 @@ class App extends React.Component {
250288
}).format(resetTime)
251289
: undefined;
252290
return (
253-
<Container fluid className='bodyMargin'>
254-
<div>
255-
<h1>Send an Envelope with an embedded signing ceremony</h1>
256-
<form>
257-
<label>
258-
Name:
259-
<input
260-
type="text"
261-
value={this.state.formName}
262-
onChange={this.formNameChange}
263-
/>
264-
</label>
265-
<label>
266-
Email:
267-
<input
268-
type="text"
269-
value={this.state.formEmail}
270-
onChange={this.formEmailChange}
271-
/>
272-
</label>
273-
</form>
274-
<div>
275-
<button type="button" onClick={this.sendEnvelope}>
276-
Send Envelope
277-
</button>
278-
</div>
279-
<h1>Results</h1>
280-
<h1>
281-
{this.state.responseSuccess !== undefined ? (
282-
this.state.responseSuccess ? (
283-
<>✅ Success!</>
284-
) : (
285-
<>❌ Problem!</>
286-
)
287-
) : null}
288-
</h1>
289-
{this.state.responseErrorMsg ? (
290-
<p>Error message: {this.state.responseErrorMsg}</p>
291-
) : null}
292-
{this.state.responseEnvelopeId ? (
293-
<p>Envelope ID: {this.state.responseEnvelopeId}</p>
294-
) : null}
295-
{this.state.responseAvailableApiRequests ? (
296-
<p>
297-
Available API requests: {this.state.responseAvailableApiRequests}
298-
</p>
299-
) : null}
300-
{resetTimeString ? (
301-
<p>API requests reset time: {resetTimeString}</p>
302-
) : null}
303-
{this.state.responseTraceId ? (
304-
<p>
305-
Trace ID: {this.state.responseTraceId}. Please include with all
306-
customer service questions.
307-
</p>
308-
) : null}
309-
</div>
310-
</Container>
311-
);
312-
}
291+
<Container className='bodyMargin'>
292+
<Row>
293+
<Col className="col-md-4">
294+
<h2>Send an Envelope</h2>
295+
<Form>
296+
<Form.Group controlId="formName">
297+
<Form.Label>Name</Form.Label>
298+
<Form.Control type="text" placeholder="Name"
299+
value={this.state.formName}
300+
onChange={this.formNameChange}
301+
302+
/>
303+
</Form.Group>
304+
<Form.Group controlId="formEmail">
305+
<Form.Label>Email</Form.Label>
306+
<Form.Control type="email" placeholder="Email"
307+
value={this.state.formEmail}
308+
onChange={this.formEmailChange}
309+
/>
310+
</Form.Group>
311+
312+
<Button variant="primary" onClick={this.sendEnvelope}>
313+
Send Envelope
314+
</Button>
315+
<Button variant="primary" className='ml-4' onClick={this.getEnvelope}>
316+
Get Envelope Status
317+
</Button>
318+
</Form>
319+
</Col>
320+
</Row>
321+
<Row className='mt-4'>
322+
<Col>
323+
<h2>Results</h2>
324+
<h2>
325+
{this.state.responseSuccess !== undefined ? (
326+
this.state.responseSuccess ? (
327+
<>✅ Success!</>
328+
) : (
329+
<>❌ Problem!</>
330+
)
331+
) : null}
332+
</h2>
333+
{this.state.responseErrorMsg ? (
334+
<p>Error message: {this.state.responseErrorMsg}</p>
335+
) : null}
336+
{this.state.responseEnvelopeId ? (
337+
<p>Envelope ID: {this.state.responseEnvelopeId}</p>
338+
) : null}
339+
{this.state.resultsEnvelopeJson ? (
340+
<p><pre>Response: {JSON.stringify(this.state.resultsEnvelopeJson, null, 4)}</pre></p>
341+
) : null}
342+
{this.state.responseAvailableApiRequests ? (
343+
<p>
344+
Available API requests: {this.state.responseAvailableApiRequests}
345+
</p>
346+
) : null}
347+
{resetTimeString ? (
348+
<p>API requests reset time: {resetTimeString}</p>
349+
) : null}
350+
{this.state.responseTraceId ? (
351+
<p>
352+
Trace ID: {this.state.responseTraceId}. Please include with all
353+
customer service questions.
354+
</p>
355+
) : null}
356+
</Col>
357+
</Row>
358+
</Container>
359+
)}
313360

314361
Welcome() {
315362
return (

0 commit comments

Comments
 (0)