Skip to content

Commit 162fb82

Browse files
InbarGazitInbarGazit
authored
Merge pull request #77 from docusign/added-connected-fields
Added connected fields to submit claim and buy new insurance scenarios
2 parents 518de53 + 67d78e8 commit 162fb82

File tree

26 files changed

+1606
-714
lines changed

26 files changed

+1606
-714
lines changed

‎client/public/index.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,19 @@
4646
<body>
4747
<noscript>You need to enable JavaScript to run this app.</noscript>
4848
<div id="root"></div>
49-
<script src="https://code.jquery.com/jquery-3.7.1.js"
50-
integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
49+
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
5150
crossorigin="anonymous">
52-
</script>
51+
</script>
5352
<script src="https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js"></script>
5453
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
5554
integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
5655
crossorigin="anonymous"></script>
57-
<script
58-
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
59-
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
60-
crossorigin="anonymous">
61-
</script>
56+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
57+
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
58+
crossorigin="anonymous"></script>
59+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
60+
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous">
61+
</script>
6262
</body>
6363

6464
</html>

‎client/public/locales/en/BuyNewInsurance.json‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,25 @@
7474
"HealthState": "State of health",
7575
"Street": "Street",
7676
"City": "City",
77+
"Country": "Country:",
7778
"State": "State",
7879
"ZipCode": "Zip code",
7980
"Options": [
80-
{ "name": "Car", "detail1": "Car model", "detail2": "Year" },
81-
{ "name": "Home", "detail1": "Home year", "detail2": "Worth" },
82-
{ "name": "Life", "detail1": "Age", "detail2": "State of health" }
81+
{
82+
"name": "Car",
83+
"detail1": "Car model",
84+
"detail2": "Year"
85+
},
86+
{
87+
"name": "Home",
88+
"detail1": "Home year",
89+
"detail2": "Worth"
90+
},
91+
{
92+
"name": "Life",
93+
"detail1": "Age",
94+
"detail2": "State of health"
95+
}
8396
],
8497
"Error": {
8598
"FirstName": "First name is required.",
@@ -89,6 +102,7 @@
89102
"State": "State is required.",
90103
"ZipCode": "Zip code is required.",
91104
"Email": "Email is required.",
105+
"Country": "Country is required.",
92106
"insuranceDetails": "Please provide your insurance details."
93107
},
94108
"ApiDecription": {

‎client/public/locales/en/Common.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,9 @@
66
"Copyright": "© 2025 Docusign Inc.",
77
"LogOutLink": "Log out",
88
"LogInButton": "Log in",
9-
"AlertMessage": "Sorry, there was some issue with the Code Grant Authorization, so you have been logged with JWT authorization"
9+
"DownloadExtensionsButton": "Extension app is now installed, try again",
10+
"DownloadExtensionsHeader": "Extension app not installed",
11+
"ContinueWithoutExtensionsButton": "Continue without extension app",
12+
"AlertMessage": "Sorry, there was an issue with Authorization Code Grant authentication, so you have been logged in with JWT authentication.",
13+
"DownloadExtensionsMessage": "Extension app not installed for this account. Either go to the <a href=\"https://apps-d.docusign.com/app-center\" target=\"_blank\" rel=\"noopener noreferrer\">App Center</a> to install one and try again, or you can continue to use this sample app without a data verification extension app.<br><br><strong>Links to extension apps:</strong><br> - <a href=\"https://apps-d.docusign.com/app-center/app/6ff9ae39-ad45-4d04-b0c2-a6e2214f5925\" target=\"_blank\" rel=\"noopener noreferrer\">Twilio</a> or <a href=\"https://apps-d.docusign.com/app-center/app/5e3b623f-afaf-45da-b6a0-f5abc3c32128\" target=\"_blank\" rel=\"noopener noreferrer\">Emailable</a> (for email verification)<br> - <a href=\"https://apps-d.docusign.com/app-center/app/04bfc1ae-1ba0-42d0-8c02-264417a7b234\" target=\"_blank\" rel=\"noopener noreferrer\">Smarty</a> (for address verification)"
1014
}

‎client/public/locales/en/SubmitClaim.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"Street": "Street:",
1313
"City": "City:",
1414
"State": "State:",
15+
"Country": "Country:",
1516
"ZipCode": "Zip code:",
1617
"DescriptionPlaseholder": "",
1718
"Date": "Date:",
@@ -96,11 +97,12 @@
9697
"Street": "Street is required.",
9798
"City": "City is required.",
9899
"State": "State is required.",
100+
"Country": "Country is required.",
99101
"ZipCode": "Zip code is required.",
100102
"Description": "Description is required."
101103
},
102104
"ApiDecription": {
103105
"SeeMore": "- See behind the scenes",
104106
"CodeFlow": "<p>View source files <a href='https://github.com/docusign/sample-app-mysure-python/blob/master/app/document.py#L26-L132' target='blank' rel='norefferer noopener'>document.py</a> and <a href='https://github.com/docusign/sample-app-mysure-python/blob/master/app/envelope.py#L10-L65' target='blank' rel='norefferer noopener'>envelope.py</a> on GitHub.</p><h3>This sample features:</h3><ul><li>Update recipient information</li><li>Create envelope from HTML Import</li><li>Fill tab data</li><li>Embedded signing (recipient view)</li<li>Optional tab</li><li>Attachment tab></ul><h3>Code flow:</h3><h5>Step 1</h5><p>When the form is submitted, we use the <a target=\"_blank\" href='https://developers.docusign.com/docs/esign-rest-api/reference/Envelopes/Envelopes/create'>Envelopes: create</a> method to send the signature request with the corresponding form information. The envelope we construct contains various data: specifically, a <code>document</code> object, a <code>recipient</code> object with the type <code>signer</code>, and <code>tabs</code> objects, which contain form field information. Since we are using embedded signing, we must also set the <code>clientUserId</code> property on the recipient.</p><p>We place the tabs on the document by specifying a <code>SignHereTab</code> element and an <code>InitialTab</code> element as part of the <code>signer</code> element. The tab elements are positioned using <em>x/y</em> coordinates on the <code>document</code>.</p><p>Last, we include the status \"sent\" in the request so that the envelope is sent for signing.</p><p>The eSignature REST API request is sent to the following endpoint:</p><pre>POST /v2.1/accounts/{accountId}/envelopes</pre><h5>Step 2</h5><p>To enable embedded signing of the envelope inside our application, we next use the <a target=\"_blank\" href='https://developers.docusign.com/docs/esign-rest-api/reference/Envelopes/EnvelopeViews/createRecipient'>EnvelopeViews: createRecipient</a> method to generate a signing URL for the recipient. For this to work, the <code>clientUserId</code> property must be set on the recipient when the envelope is sent during step 1 above.</p><p>Once the envelope is sent, we save the envelope ID and recipient information to our session. Then, we retrieve the envelope ID and recipient info from our session and create the recipient view by generating the URL and displaying the recipient view in a full-width and full-height iframe inside our page.</p><p>To create the recipient view of the envelope, we send an API request to:</p><pre>POST /v2.1/accounts/{accountId}/envelopes/{envelopeId}/views/recipient</pre>"
105107
}
106-
}
108+
}

‎client/src/api/insuranceAPI.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,20 @@ export async function submitClaim(request) {
3131
}
3232
}
3333

34+
export async function getExtensions() {
35+
try {
36+
const response = await axios.get(
37+
process.env.REACT_APP_API_BASE_URL + "/extensionApps",
38+
{
39+
withCredentials: true
40+
}
41+
);
42+
return handleResponse(response);
43+
} catch (error) {
44+
handleError(error);
45+
}
46+
}
47+
3448
export async function getStatus(fromDate) {
3549
try {
3650
const response = await axios.get(

‎client/src/assets/scss/components/_all.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
@import "accordion";
44
@import "card-info";
55
@import "custom-list";
6+
@import "loader";
67
@import "tables";
78
@import "dropdowns";
89
@import "tabs";

‎client/src/assets/scss/components/_loader.scss‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
.LoaderWrapper {
2+
width: 100%;
3+
max-height: 100%;
4+
min-height: 342px;
5+
display: flex;
6+
flex-direction: column;
7+
justify-content: center;
8+
}
9+
10+
.LoaderHeader {
11+
text-align: center;
12+
line-height: 40px;
13+
14+
font-size: 36px;
15+
font-weight: 600;
16+
font-style: normal;
17+
}
18+
19+
.LoaderText {
20+
text-align: left;
21+
22+
max-width: 504px;
23+
width: 100%;
24+
padding: 0 1rem;
25+
line-height: 24px;
26+
margin-left: auto;
27+
margin-right: auto;
28+
29+
font-size: 16px;
30+
font-weight: 300;
31+
font-style: normal;
32+
}
33+
34+
.Loader {
35+
align-self: center;
36+
width: 100px;
37+
height: 100px;
38+
border: 10px solid #379434;
39+
border-bottom-color: white;
40+
border-radius: 50%;
41+
display: inline-block;
42+
box-sizing: border-box;
43+
animation: rotation 1s linear infinite;
44+
}
45+
46+
@keyframes rotation {
47+
0% {
48+
transform: rotate(0deg);
49+
}
50+
51+
100% {
52+
transform: rotate(360deg);
53+
}
54+
}

‎client/src/components/ExtensionsModal.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
import { useTranslation } from "react-i18next";
3+
import { Modal, Button, Container } from "react-bootstrap";
4+
5+
export const ExtensionsModal = ({ show, onDownloadExtensions, onHide, title, message }) => {
6+
const { t } = useTranslation("Common");
7+
8+
const handleContinue = () => {
9+
onHide();
10+
};
11+
12+
return (
13+
<Modal show={show} onHide={onHide} centered>
14+
<Modal.Header closeButton>
15+
<Modal.Title>{title}</Modal.Title>
16+
</Modal.Header>
17+
18+
<Modal.Body>
19+
<Container>
20+
<p dangerouslySetInnerHTML={{ __html: message }} />
21+
</Container>
22+
</Modal.Body>
23+
24+
<Modal.Footer style={{ flexWrap: "inherit"}}>
25+
<Button className="btn btn-success" onClick={onDownloadExtensions} style={{ color: "white" }}>
26+
{t("DownloadExtensionsButton")}
27+
</Button>
28+
<Button className="btn btn-secondary" onClick={handleContinue}>
29+
{t("ContinueWithoutExtensionsButton")}
30+
</Button>
31+
</Modal.Footer>
32+
</Modal>
33+
);
34+
};

‎client/src/components/Loader.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export const Loader = ({ visible, title, paragraph }) => {
2+
return (
3+
visible && (
4+
<div className="LoaderWrapper">
5+
<span className="Loader"></span>
6+
{title ?
7+
<div>
8+
<h2 className="LoaderHeader">{title}</h2>
9+
<div className="LoaderText">{paragraph}</div>
10+
</div>
11+
: null
12+
}
13+
</div>
14+
)
15+
);
16+
};

‎client/src/pages/buyNewInsurance/components/ApiDescription.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import React from "react";
22
import { useTranslation } from "react-i18next";
33
import parse from "html-react-parser";
4+
import { Collapse } from 'react-bootstrap';
45

56
export const ApiDescription = () => {
67
const { t } = useTranslation("BuyNewInsurance");
8+
const [open, setOpen] = React.useState(false);
79
return (
810
<div className="col-lg-6 pt-5 pb-4">
911
<div id="accordion">
@@ -16,20 +18,22 @@ export const ApiDescription = () => {
1618
data-target="#collapseOne"
1719
aria-expanded="false"
1820
aria-controls="collapseOne"
21+
onClick={() => {setOpen(!open)}}
1922
>
2023
{t("ApiDecription.SeeMore")}
2124
</button>
2225
</h5>
2326
</div>
2427
<div
2528
id="collapseOne"
26-
className="collapse"
2729
aria-labelledby="headingOne"
2830
data-parent="#accordion"
2931
>
30-
<div className="card-body">
31-
{parse(t("ApiDecription.CodeFlow"))}
32-
</div>
32+
<Collapse in={open}>
33+
<div className="card-body">
34+
{parse(t("ApiDecription.CodeFlow"))}
35+
</div>
36+
</Collapse>
3337
</div>
3438
</div>
3539
</div>

0 commit comments

Comments
 (0)