Mysure updates (#66)

* branding updates

Author: karissarjacobsen

app/api/requests.py

@@ -98,8 +98,10 @@ def envelope_list():
     except TypeError:
         return jsonify(message='Invalid JSON input'), 400
 
+    user_documents = session.get('ds_documents', [])
+
     try:
-        envelopes = Envelope.list(envelope_args, session['ds_documents'], session)
+        envelopes = Envelope.list(envelope_args, user_documents, session)
     except ApiException as exc:
         return process_error(exc)
     return jsonify({'envelopes': envelopes})

app/document.py

@@ -6,7 +6,6 @@
     EnvelopeDefinition,
     Tabs,
     Email,
-    InitialHere,
     SignHere,
     Signer,
     Checkbox,
@@ -86,14 +85,6 @@ def create_claim(cls, tpl, claim, envelope_args):
             anchor_x_offset='20'
         )
 
-        # Create an initials tab
-        initial_here = InitialHere(
-            anchor_string='/initials_1/',
-            anchor_units='pixels',
-            anchor_y_offset='10',
-            anchor_x_offset='20'
-        )
-
         # Create an email field
         email = Email(
             document_id='1',
@@ -115,7 +106,6 @@ def create_claim(cls, tpl, claim, envelope_args):
         signer.tabs = Tabs(
             sign_here_tabs=[sign_here],
             email_tabs=[email],
-            initial_here_tabs=[initial_here],
             signer_attachment_tabs=[signer_attachment_tabs],
 
         )

app/envelope.py

@@ -76,6 +76,9 @@ def list(envelope_args, user_documents, session):
         access_token = session.get('access_token')
         account_id = session.get('account_id')
 
+        if not access_token or not account_id:
+            return []
+
         ds_client = DsClient.get_configured_instance(access_token)
         envelope_api = EnvelopesApi(ds_client)
         envelopes_info = envelope_api.list_status_changes(

public/locales/en/BuyNewInsurance.json

@@ -93,7 +93,7 @@
   },
   "ApiDecription": {
     "SeeMore": "- See behind the scenes",
-    "CodeFlow": "<h3>This sample features:</h3><ul><li>Update recipient information<li>Create envelope from HTML import<li>Fill tab data<li>Embedded signing (recipient view)<li>Request payment</li><li>Formula field</li></ul><p><strong>Note</strong>: This scenario uses <a target=\"_blank\" href=\"https://www.docusign.com/products/payments\">Docusign Payments</a>. To complete the transaction, you will need to set up a <a target=\"_blank\" href=\"https://support.docusign.com/en/guides/managing-payment-gateways\">payment gateway</a> on your account. </p><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 a <code>document</code> object, a <code>recipient</code> object of type <code>signer</code>, and <code>tabs,</code> which contain the form fields 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 a <code>PaymentTab</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>The <code>PaymentTab</code> 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.</p><p>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:</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>"
+    "CodeFlow": "<p>View source files <a href='https://github.com/docusign/sample-app-mysure-python/blob/master/app/document.py#L135-L326' 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>Create envelope from HTML import<li>Fill tab data<li>Embedded signing (recipient view)<li>Request payment</li><li>Formula field</li></ul><p><strong>Note</strong>: This scenario uses <a target=\"_blank\" href=\"https://www.docusign.com/products/payments\">Docusign Payments</a>. To complete the transaction, you will need to set up a <a target=\"_blank\" href=\"https://support.docusign.com/en/guides/managing-payment-gateways\">payment gateway</a> on your account. </p><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 a <code>document</code> object, a <code>recipient</code> object of type <code>signer</code>, and <code>tabs,</code> which contain the form fields 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 a <code>PaymentTab</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>The <code>PaymentTab</code> 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.</p><p>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:</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>"
   },
   "SubmitInfo": "By submitting the form, you confirm payment for this activity. The system will transfer you to the payment form after signing."
 }

public/locales/en/History.json

@@ -8,5 +8,9 @@
   "HTMLOptionButton": "Download MySure.pdf",
   "SummaryOptionButton": "Download Summary",
   "CombinedOptionButton": "Download combined PDF",
-  "EmptyListMessage": " Create some MySure transactions and they will start showing up here."
+  "EmptyListMessage": " Create some MySure transactions and they will start showing up here.",
+  "ApiDecription": {
+    "SeeMore": "- See behind the scenes",
+    "CodeFlow": "<p>View source file <a href='https://github.com/docusign/sample-app-mysure-python/blob/master/app/envelope.py#L68-L108' target='blank' rel='norefferer noopener'>envelopes.py</a> on GitHub.</p><h3>This sample features:</h3><ul><li>List envelope status changes</li><li>Download envelope documents</li></ul><h3>Code flow:</h3><h5>Step 1</h5><p>When the status page loads, we use the <a href='https://developers.docusign.com/docs/esign-rest-api/reference/envelopes/envelopes/liststatuschanges/' target='blank' rel='noopener noreferrer'>Envelopes: listStatusChanges</a> method to retrieve the statuses of envelopes in the authenticated user’s account, filtering by the current day's date with the <code>from_date</code> query parameter. Additionally, we use the <code>include</code> 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.</p><p>To list envelope status changes, we send an API request to:</p><pre>POST /restapi/v2.1/accounts/{accountId}/envelopes?from_date={date}&include='recipients'</pre><h5>Step 2</h5><p>To download envelope documents, we send an API request to: <pre>GET /restapi/v2.1/accounts/{accountId}/envelopes/{envelopeId}/documents/{documentId}</pre></p>"
+  }
 }

public/locales/en/RequestAutoRenewal.json

@@ -12,7 +12,7 @@
   },
   "ApiDecription": {
     "SeeMore": "- See behind the scenes",
-    "CodeFlow": "<h3>This sample features:</h3><ul><li>Creating an elastic template<li>Embedding an elastic template on your site</li></ul><h3>Code flow:</h3><h5>Step 1</h5><p>When the form is submitted, the Click API is used to create a new elastic template. An elastic template 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 <code>name</code>, the <code>displaySettings</code> that control what the UI experience will look like, and a <code>document</code> that will be shown to the user when they accept.</p><p>To create the elastic template, send an API request to:</p><pre>POST /v1/accounts/{accountId}/clickwraps</pre><h5>Step 2</h5><p>The call from step 1 returns the clickwrap ID, which we need. We then add this to the HTML on our website so that it now looks like this:</p><pre><code>&lt;div id=\"ds-terms-of-service\">&lt;/div></code><code>&lt;script src=\"https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js\">&lt;/script></code><code>&lt;script></code><code>docuSignClick.Clickwrap.render({</code><code>    environment: 'https://demo.docusign.net',</code><code>    accountId: '&lt;your account ID>',</code><code>    clickwrapId: '&lt;your clickwrap ID',</code><code>    clientUserId: 'UNIQUE_USER_ID'</code><code>}, '#ds-terms-of-service');</code><code>&lt;/script></code></pre>"
+    "CodeFlow": "<p>View source file <a href='https://github.com/docusign/sample-app-mysure-python/blob/master/app/clickwrap.py' target='blank' rel='norefferer noopener'>clickwrap.py</a> on GitHub.</p><h3>This sample features:</h3><ul><li>Creating an elastic template<li>Embedding an elastic template on your site</li></ul><h3>Code flow:</h3><h5>Step 1</h5><p>When the form is submitted, the Click API is used to create a new elastic template. An elastic template 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 <code>name</code>, the <code>displaySettings</code> that control what the UI experience will look like, and a <code>document</code> that will be shown to the user when they accept.</p><p>To create the elastic template, send an API request to:</p><pre>POST /v1/accounts/{accountId}/clickwraps</pre><h5>Step 2</h5><p>The call from step 1 returns the clickwrap ID, which we need. We then add this to the HTML on our website so that it now looks like this:</p><pre><code>&lt;div id=\"ds-terms-of-service\">&lt;/div></code><code>&lt;script src=\"https://demo.docusign.net/clickapi/sdk/latest/docusign-click.js\">&lt;/script></code><code>&lt;script></code><code>docuSignClick.Clickwrap.render({</code><code>    environment: 'https://demo.docusign.net',</code><code>    accountId: '&lt;your account ID>',</code><code>    clickwrapId: '&lt;your clickwrap ID',</code><code>    clientUserId: 'UNIQUE_USER_ID'</code><code>}, '#ds-terms-of-service');</code><code>&lt;/script></code></pre>"
   },
   "Renewal": {
     "TermsName": "Renewal Terms",

public/locales/en/SubmitClaim.json

@@ -101,6 +101,6 @@
   },
   "ApiDecription": {
     "SeeMore": "- See behind the scenes",
-    "CodeFlow": "<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>"
+    "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>"
   }
 }

src/assets/scss/layouts/_content.scss

@@ -89,7 +89,7 @@ h5,
     padding-bottom: 50px;
 
     &.container-fluid {
-        max-width: 1140px;
+        max-width: 80%;
     }
 }
 

src/pages/history/components/ApiDescription.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import parse from "html-react-parser";
+
+export const ApiDescription = () => {
+  const { t } = useTranslation("History");
+  const style = {
+    // minWidth: 400
+  };
+
+  return (
+    <div className="col-lg-5" style={style}>
+      <div id="accordion">
+        <div className="card">
+          <div className="card-header" id="headingOne">
+            <h5 className="mb-0">
+              <button
+                className="btn btn-link"
+                data-toggle="collapse"
+                data-target="#collapseOne"
+                aria-expanded="false"
+                aria-controls="collapseOne"
+              >
+                {t("ApiDecription.SeeMore")}
+              </button>
+            </h5>
+          </div>
+          <div
+            id="collapseOne"
+            className="collapse"
+            aria-labelledby="headingOne"
+            data-parent="#accordion"
+          >
+            <div className="card-body">
+              {parse(t("ApiDecription.CodeFlow"))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};