diff --git a/README.MD b/README.MD index da9395d..af78ed6 100644 --- a/README.MD +++ b/README.MD @@ -1,11 +1,11 @@ -# Python and React: MyUni Education Sample Application +# Python and React: University Sample Application -### Github repo: MyUniSampleApp +### Github repo: University Sample App ## Introduction -MyUni is a Docusign sample application written in Python 3.7 (server) and React (client). You can find a live instance running at [https://myuni.sampleapps.docusign.com/](https://myuni.sampleapps.docusign.com/). +The University Sample App is a Docusign sample application written in Python 3.7 (server) and React (client). You can find a live instance running at [https://university.sampleapps.docusign.com/](https://university.sampleapps.docusign.com/). -MyUni demonstrates the following: +The University Sample App demonstrates the following: 1. Authentication with Docusign via [JSON Web Token (JWT) Grant](https://developers.docusign.com/platform/auth/jwt/). 2. **Change Your Major or Minor:** ([Source](./app/api/requests.py)) @@ -48,8 +48,8 @@ MyUni demonstrates the following: **Manual** -1. Download or clone this repository to your workstation to directory **sample-app-myuni-python** -2. Navigate to that folder: **`cd sample-app-myuni-python`** directory +1. Download or clone this repository to your workstation to directory **sample-app-university-python** +2. Navigate to that folder: **`cd sample-app-university-python`** directory 3. Install python packages **`pip install -r requirements.txt`** 4. Install React dependencies using [npm](https://www.npmjs.com/) package manager **npm install** 5. Update the **.env** file with the integration key and other settings. @@ -58,8 +58,8 @@ MyUni demonstrates the following: **Using installation scripts** -1. Download or clone this repository to your workstation in the folder **sample-app-myuni-python**. -2. Navigate to the scripts subfolder: **`cd sample-app-myuni-python/scripts`** +1. Download or clone this repository to your workstation in the folder **sample-app-university-python**. +2. Navigate to the scripts subfolder: **`cd sample-app-university-python/scripts`** 3. Run the installation script: **`./install.sh`** 4. Update the **.env** file with the integration key and other settings. > **Note:** Protect your integration key and client secret. You should make sure that your **.env** file will not be stored in your source code repository. @@ -70,11 +70,11 @@ All installation scripts are located in the **scripts** folder. 1. To stop the application, run **`./stop.sh`** 1. To remove the virtual environment and modules, run **`./clean.sh`** -## Running MyUni +## Running the University Sample App ### Manual -1. Navigate to the application folder: **`cd sample-app-myuni-python`** +1. Navigate to the application folder: **`cd sample-app-university-python`** 2. Run the application: **`flask run --port 5001`** 3. Run npm: **`npm start`** 4. Open a browser to **http://localhost:3000** diff --git a/app/templates/minor-major.html b/app/templates/minor-major.html index 7e5cccd..e25ab11 100644 --- a/app/templates/minor-major.html +++ b/app/templates/minor-major.html @@ -160,7 +160,7 @@ Docusign logo - MyUni + University Sample App diff --git a/app/templates/multi-sign.html b/app/templates/multi-sign.html index 5ce4457..d0a9286 100644 --- a/app/templates/multi-sign.html +++ b/app/templates/multi-sign.html @@ -160,7 +160,7 @@ Docusign logo - MyUni + University Sample App diff --git a/app/templates/payment-activity.html b/app/templates/payment-activity.html index 22c36f4..933746c 100644 --- a/app/templates/payment-activity.html +++ b/app/templates/payment-activity.html @@ -165,7 +165,7 @@ Docusign logo - MyUni + University Sample App diff --git a/app/templates/transcript.html b/app/templates/transcript.html index c144d16..9d424c2 100644 --- a/app/templates/transcript.html +++ b/app/templates/transcript.html @@ -180,7 +180,7 @@ Docusign logo - MyUni + University Sample App diff --git a/public/MyUni_OG.jpg b/public/MyUni_OG.jpg new file mode 100644 index 0000000..e04e29d Binary files /dev/null and b/public/MyUni_OG.jpg differ diff --git a/public/MyUni_OG.png b/public/MyUni_OG.png deleted file mode 100644 index 0cf51ff..0000000 Binary files a/public/MyUni_OG.png and /dev/null differ diff --git a/public/index.html b/public/index.html index a109de4..ca26b06 100644 --- a/public/index.html +++ b/public/index.html @@ -14,13 +14,13 @@ - MyUni Docusign Sample Application - + University Sample App + - - - - + + + + diff --git a/public/locales/en/About.json b/public/locales/en/About.json index 5eae830..a330c07 100644 --- a/public/locales/en/About.json +++ b/public/locales/en/About.json @@ -1,12 +1,12 @@ { - "Title": "MyUni Sample App", + "Title": "University Sample App", "Description": "

This education-focused Docusign sample application demonstrates some common Docusign API integration workflows built from the Docusign eSignature API, Docusign Click API, Docusign Payments, and Docusign Connect.

", "SourceButton": "GitHub Source", - "GitHubLink": " https://github.com/docusign/sample-app-myuni-python", + "GitHubLink": " https://github.com/docusign/sample-app-university-python", "SandboxText": "

Get Started with the Docusign APIs Today

", "SandboxButton": "GET YOUR DEVELOPER ACCOUNT", "Description2": "


With the Docusign developer account, you can test our APIs for free! Developer accounts do not expire and have enterprise-level features enabled.

", - "Features": "

MyUni features:

", + "Features": "

The University Sample App features:

", "ToolsandLinks": "API Tools and Resources", "DeveloperCenter": "Developer Center", "DeveloperCenterLink": "https://developers.docusign.com", @@ -15,6 +15,5 @@ "ESignatureDocumentation": "Docusign eSignature API Reference", "ESignatureDocumentationLink": "https://developers.docusign.com/docs/esign-rest-api/reference/", "DeveloperCommunity": "Developer Community", - "DeveloperCommunityLink": "http://stackoverflow.com/questions/tagged/docusignapi", - "AboutDocuSign": "

About Docusign

" + "DeveloperCommunityLink": "http://stackoverflow.com/questions/tagged/docusignapi" } diff --git a/public/locales/en/Common.json b/public/locales/en/Common.json index 6897a82..478ad3b 100644 --- a/public/locales/en/Common.json +++ b/public/locales/en/Common.json @@ -1,9 +1,8 @@ { - "ApplicationName": "MyUni", + "ApplicationName": "University Sample App", "TransactionHistoryLink": "Status", "GitHubLink": "GitHub Source", "AboutLink": "About", - "Copyright": "© 2024 Docusign Inc.", "LogOutLink": "Log out", "LogInButton": "Log in", "AlertMessage": "Sorry, there was some issue with the Code Grant Authorization, so you have been logged with JWT authorization" diff --git a/public/locales/en/History.json b/public/locales/en/History.json index bd8e84c..cf29c1a 100644 --- a/public/locales/en/History.json +++ b/public/locales/en/History.json @@ -1,5 +1,5 @@ { - "Title": "MyUni Sample App", + "Title": "University Sample App", "Header1": "Subject", "Header2": "Applicant", "Header3": "Last Updated", @@ -8,9 +8,9 @@ "HTMLOptionButton": "Download signed document", "SummaryOptionButton": "Download summary", "CombinedOptionButton": "Download combined PDF", - "EmptyListMessage": "Once you begin creating MyUni transactions, you'll be able to check their status here and download the documents they generate...", + "EmptyListMessage": "Once you begin creating transactions through the sample app, you'll be able to check their status here and download the documents they generate...", "ApiDecription": { "SeeMore": "- See behind the scenes", - "CodeFlow": "

View source file envelopes.py on GitHub.

This sample features:

Code flow:

Step 1

When the status page loads, we use the Envelopes: listStatusChanges method to retrieve the statuses of envelopes in the authenticated user’s account, filtering by the current day's date with the from_date query parameter. Additionally, we use the include query parameter to retrieve recipient information for each envelope. We then cross-reference these envelopes with the envelope IDs saved in the app’s session and display only those sent by the currently authenticated user using the app.

To list envelope status changes, we send an API request to:

POST /restapi/v2.1/accounts/{accountId}/envelopes?from_date={date}&include='recipients'
Step 2

To download envelope documents, we send an API request to: 

GET /restapi/v2.1/accounts/{accountId}/envelopes/{envelopeId}/documents/{documentId}

" + "CodeFlow": "

View source file envelopes.py on GitHub.

This sample features:

Code flow:

Step 1

When the status page loads, we use the Envelopes: listStatusChanges method to retrieve the statuses of envelopes in the authenticated user’s account, filtering by the current day's date with the from_date query parameter. Additionally, we use the include query parameter to retrieve recipient information for each envelope. We then cross-reference these envelopes with the envelope IDs saved in the app’s session and display only those sent by the currently authenticated user using the app.

To list envelope status changes, we send an API request to:

POST /restapi/v2.1/accounts/{accountId}/envelopes?from_date={date}&include='recipients'
Step 2

To download envelope documents, we send an API request to: 

GET /restapi/v2.1/accounts/{accountId}/envelopes/{envelopeId}/documents/{documentId}

" } } \ No newline at end of file diff --git a/public/locales/en/Home.json b/public/locales/en/Home.json index f783030..58e70cb 100644 --- a/public/locales/en/Home.json +++ b/public/locales/en/Home.json @@ -1,8 +1,6 @@ { - "Header1": "Welcome to MyUni", + "Header1": "Welcome to the University Sample App", "Header2": "Self-Service Student Portal", - "Footer1": "Docusign: It's time to agree better", - "Footer2": "

Docusign helps organizations connect and automate how they prepare, sign, act on, and manage agreements.

", "SandBoxButton": "Create Developer Account", "LearnMoreButton": "Learn More", "Card1": { diff --git a/public/locales/en/RequestExtracurricularActivity.json b/public/locales/en/RequestExtracurricularActivity.json index ff7cc5b..b271e94 100644 --- a/public/locales/en/RequestExtracurricularActivity.json +++ b/public/locales/en/RequestExtracurricularActivity.json @@ -43,6 +43,6 @@ }, "ApiDecription": { "SeeMore": "- See behind the scenes", - "CodeFlow": "

View source files document.py and envelope.py on GitHub.

This sample features:

Note: This scenario uses Docusign Payments. To complete the transaction, you will need to set up a payment gateway on your account.

Code flow:

Step 1

When the form is submitted, we use the Envelopes: create method to send the signature request with the corresponding form information. The envelope we construct contains a document object, a recipient object of type signer, and tabs, which contain the form fields information. Since we are using embedded signing, we must also set the clientUserId property on the recipient.

We place the tabs on the document by specifying a SignHereTab element and a PaymentTab element as part of the signer element. The tab elements are positioned using x/y coordinates on the document.

The PaymentTab serves two purposes. It is used both to display the amount due in the document and to instruct Docusign to proceed to collect payments after the document is signed.

Lastly, we include the status \"sent\" in the request so that the envelope is sent for signing. The eSignature REST API request is sent to the following endpoint:

POST /v2.1/accounts/{accountId}/envelopes

Step 2

To enable embedded signing of the envelope inside our application, we next use the EnvelopeViews: createRecipient method to generate a signing URL for the recipient. For this to work, the clientUserId property must be set on the recipient when the envelope is sent during step 1 above.

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.

To create the recipient view of the envelope, we send an API request to:

POST /v2.1/accounts/{accountId}/envelopes/{envelopeId}/views/recipient
" + "CodeFlow": "

View source files document.py and envelope.py on GitHub.

This sample features:

Note: This scenario uses Docusign Payments. To complete the transaction, you will need to set up a payment gateway on your account.

Code flow:

Step 1

When the form is submitted, we use the Envelopes: create method to send the signature request with the corresponding form information. The envelope we construct contains a document object, a recipient object of type signer, and tabs, which contain the form fields information. Since we are using embedded signing, we must also set the clientUserId property on the recipient.

We place the tabs on the document by specifying a SignHereTab element and a PaymentTab element as part of the signer element. The tab elements are positioned using x/y coordinates on the document.

The PaymentTab serves two purposes. It is used both to display the amount due in the document and to instruct Docusign to proceed to collect payments after the document is signed.

Lastly, we include the status \"sent\" in the request so that the envelope is sent for signing. The eSignature REST API request is sent to the following endpoint:

POST /v2.1/accounts/{accountId}/envelopes

Step 2

To enable embedded signing of the envelope inside our application, we next use the EnvelopeViews: createRecipient method to generate a signing URL for the recipient. For this to work, the clientUserId property must be set on the recipient when the envelope is sent during step 1 above.

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.

To create the recipient view of the envelope, we send an API request to:

POST /v2.1/accounts/{accountId}/envelopes/{envelopeId}/views/recipient
" } } diff --git a/public/locales/en/RequestMajorMinor.json b/public/locales/en/RequestMajorMinor.json index a3f49c7..b77be62 100644 --- a/public/locales/en/RequestMajorMinor.json +++ b/public/locales/en/RequestMajorMinor.json @@ -18,6 +18,6 @@ }, "ApiDecription": { "SeeMore": "- See behind the scenes", - "CodeFlow": "

View source files document.py and envelope.py on GitHub.

This sample features:

Code flow:

Step 1

When the form is submitted, we use the Envelopes: create method to send the signature request with the corresponding form information. The envelope we construct contains various data: specifically, a document object, a recipient object with the type signer, and tabs objects, which contain form field information. Since we are using embedded signing, we must also set the clientUserId property on the recipient.

We place the tabs on the document by specifying a SignHereTab element and an InitialTab element as part of the signer element. The tab elements are positioned using x/y coordinates on the document.

Lastly, we include the status \"sent\" in the request so that the envelope is sent for signing.

The eSignature REST API request is sent to the following endpoint:

POST /v2.1/accounts/{accountId}/envelopes
Step 2

To enable embedded signing of the envelope inside our application, we next use the EnvelopeViews: createRecipient method to generate a signing URL for the recipient. For this to work, the clientUserId property must be set on the recipient when the envelope is sent during step 1 above.

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.

To create the recipient view of the envelope, we send an API request to:

POST /v2.1/accounts/{accountId}/envelopes/{envelopeId}/views/recipient
" + "CodeFlow": "

View source files document.py and envelope.py on GitHub.

This sample features:

Code flow:

Step 1

When the form is submitted, we use the Envelopes: create method to send the signature request with the corresponding form information. The envelope we construct contains various data: specifically, a document object, a recipient object with the type signer, and tabs objects, which contain form field information. Since we are using embedded signing, we must also set the clientUserId property on the recipient.

We place the tabs on the document by specifying a SignHereTab element and an InitialTab element as part of the signer element. The tab elements are positioned using x/y coordinates on the document.

Lastly, we include the status \"sent\" in the request so that the envelope is sent for signing.

The eSignature REST API request is sent to the following endpoint:

POST /v2.1/accounts/{accountId}/envelopes
Step 2

To enable embedded signing of the envelope inside our application, we next use the EnvelopeViews: createRecipient method to generate a signing URL for the recipient. For this to work, the clientUserId property must be set on the recipient when the envelope is sent during step 1 above.

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.

To create the recipient view of the envelope, we send an API request to:

POST /v2.1/accounts/{accountId}/envelopes/{envelopeId}/views/recipient
" } } diff --git a/public/locales/en/RequestTranscript.json b/public/locales/en/RequestTranscript.json index 6f781c7..893415c 100644 --- a/public/locales/en/RequestTranscript.json +++ b/public/locales/en/RequestTranscript.json @@ -12,7 +12,7 @@ }, "ApiDecription": { "SeeMore": "- See behind the scenes", - "CodeFlow": "

View source file clickwrap.py on GitHub.

This sample features:

Code flow:

Step 1

When the form is submitted, the Click API is used to create a new elastic template. Elastic Signing is a Docusign technology that enables you to have a webpage where you can ask your users to click to agree to something. To create the elastic template, you need to provide the name, the displaySettings that control what the UI experience will look like, and a document that will be shown to the user when they accept.

To create the elastic template, send an API request to:

POST /v1/accounts/{accountId}/clickwraps

Step 2

The call from step 1 returns the elastic template ID, which we need. We then add this to the HTML on our website so that it now looks like this:

<div id='ds-terms-of-service'></div><br><script src='https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js'></script><br><script><br>docuSignClick.Clickwrap.render({<br>    environment: 'https://demo.docusign.net',<br>    accountId: '<your account ID>',<br>    clickwrapId: '<your clickwrap ID',<br>    clientUserId: 'UNIQUE_USER_ID'<br>}, '#ds-terms-of-service');<br></script>
" + "CodeFlow": "

View source file clickwrap.py on GitHub.

This sample features:

Code flow:

Step 1

When the form is submitted, the Click API is used to create a new elastic template. Elastic Signing is a Docusign technology that enables you to have a webpage where you can ask your users to click to agree to something. To create the elastic template, you need to provide the name, the displaySettings that control what the UI experience will look like, and a document that will be shown to the user when they accept.

To create the elastic template, send an API request to:

POST /v1/accounts/{accountId}/clickwraps

Step 2

The call from step 1 returns the elastic template ID, which we need. We then add this to the HTML on our website so that it now looks like this:

<div id='ds-terms-of-service'></div><br><script src='https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js'></script><br><script><br>docuSignClick.Clickwrap.render({<br>    environment: 'https://demo.docusign.net',<br>    accountId: '<your account ID>',<br>    clickwrapId: '<your clickwrap ID',<br>    clientUserId: 'UNIQUE_USER_ID'<br>}, '#ds-terms-of-service');<br></script>
" }, "Transcript": { "TermsName": "Terms of Transcript", diff --git a/public/manifest.json b/public/manifest.json index e13f3a4..f6ccc61 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,5 +1,5 @@ { - "short_name": "Docusign MyUni", + "short_name": "University Sample App", "name": "Create React App Sample", "icons": [ { diff --git a/src/components/Footer.js b/src/components/Footer.js index af798aa..e387356 100644 --- a/src/components/Footer.js +++ b/src/components/Footer.js @@ -5,9 +5,6 @@ export const Footer = () => { const { t } = useTranslation("Common"); return ( ); }; diff --git a/src/components/Header.js b/src/components/Header.js index f230721..3cc0036 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -45,7 +45,7 @@ export const Header = () => {
  • diff --git a/src/features/About/index.js b/src/features/About/index.js index 2e3cc3a..72f1194 100644 --- a/src/features/About/index.js +++ b/src/features/About/index.js @@ -66,7 +66,6 @@ export const About = () => {

    - {parse(t("AboutDocuSign"))}

    diff --git a/src/features/Home/index.js b/src/features/Home/index.js index 72627b0..08d4637 100644 --- a/src/features/Home/index.js +++ b/src/features/Home/index.js @@ -137,7 +137,6 @@ export const Home = () => {
    -

    {t("Footer1")}

    {
    -
    {parse(t("Footer2"))}