From 9b00d721d4704fe8922f918f8fd0ea6bc463b229 Mon Sep 17 00:00:00 2001
From: Larry Kluger <larry.kluger@docusign.com>
Date: Mon, 2 Sep 2024 15:34:03 +0300
Subject: [PATCH] added show Decline action

---
 app-examples/embedded-signing/click2agree.js        |  5 +++++
 app-examples/embedded-signing/focusedViewSigning.js |  7 ++++++-
 app-examples/embedded-signing/index.html            |  9 +++++++--
 app-examples/embedded-signing/script.js             | 10 +++++++---
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/app-examples/embedded-signing/click2agree.js b/app-examples/embedded-signing/click2agree.js
index a002174..c883040 100644
--- a/app-examples/embedded-signing/click2agree.js
+++ b/app-examples/embedded-signing/click2agree.js
@@ -59,6 +59,8 @@ class Click2Agree {
         this.outputStyle = args.outputStyle;
         this.useIframe = args.useIframe;
         this.useModal = args.useModal;
+        this.showDecline = args.showDecline;
+
 
         // supplemental = [{include: true, signerMustAcknowledge: "view"},
         //   {include: true, signerMustAcknowledge: "accept"}];
@@ -123,6 +125,9 @@ class Click2Agree {
                         color: $(`#${this.modelButtonId} span`).css('color'),
                     }
                 },
+                signingDeclineButton: {
+                    show: this.showDecline
+                },
                 /**
                  * signingNavigationButton object is NOT used when the view is Click to Agree
                  * 
diff --git a/app-examples/embedded-signing/focusedViewSigning.js b/app-examples/embedded-signing/focusedViewSigning.js
index e463a1e..8f83b40 100644
--- a/app-examples/embedded-signing/focusedViewSigning.js
+++ b/app-examples/embedded-signing/focusedViewSigning.js
@@ -40,6 +40,8 @@ class FocusedViewSigning {
         this.signing = false; 
         this.document = args.document;
         this.padding = args.padding;
+        this.showDecline = args.showDecline;
+
         this.documentChoice = { // response means generic "document" responsive
             default: {responsive: false, request: this.envelopes.createTemplateRequest.bind(this.envelopes)},
             htmlRegResp: {responsive: true, request: this.envelopes.createHtmlRegRequest.bind(this.envelopes)},
@@ -159,7 +161,10 @@ class FocusedViewSigning {
                     finishText: $(`#${this.modelButtonId} span`).text(), // default is Submit
                     // 'bottom-left'|'bottom-center'|'bottom-right',  default: bottom-right
                     position: $(`#${this.modelButtonPosition}`).val()
-                }
+                },
+                signingDeclineButton: {
+                    show: this.showDecline
+                },
             }
         }
 
diff --git a/app-examples/embedded-signing/index.html b/app-examples/embedded-signing/index.html
index fbc5475..30e8b46 100644
--- a/app-examples/embedded-signing/index.html
+++ b/app-examples/embedded-signing/index.html
@@ -863,7 +863,7 @@ <h5>Account</h5>
                                 <option value="default">Default account</option>
                             </select>
                         </div>
-                        <h5>Output</h5>
+                        <h5 class="mt-3">Output</h5>
                         <div>
                             <label for="outputStyle" class="form-label">Output style:</label>
                             <select id="outputStyle" class="ms-2 form-select display-inline w19"
@@ -877,7 +877,12 @@ <h5>Output</h5>
                         <p>
                             For docusign.js signing ceremonies, if «iframe» is off, a zero GUI chrome iframe is used.
                         </p>
-                        <h5>Authentication</h5>
+                        <h5>Signer User Experience</h5>
+                        <div>
+                            <label for="showDecline" class="">Show Decline option?</label>
+                            <input id="showDecline" class="form-check-input baseline ms-1" type="checkbox">
+                        </div>
+                        <h5 class="mt-3">Authentication</h5>
                         <p>Optional: Docusign can include authentication checks as part of the signing ceremony</p>
                         <p>
                             <label for="authStyle" class="form-label">Additional Authentication:</label>
diff --git a/app-examples/embedded-signing/script.js b/app-examples/embedded-signing/script.js
index c1fb23c..1550ad5 100644
--- a/app-examples/embedded-signing/script.js
+++ b/app-examples/embedded-signing/script.js
@@ -89,6 +89,7 @@ $(async function () {
         document3: "default",
         outputStyle: "openUrl",
         useIframe: true,
+        showDecline: false,
         gatewayId: "",
         authStyle: "none",
         idvConfigId: "",
@@ -109,6 +110,7 @@ $(async function () {
         supp32include: true,
         useSigningCeremonyDefaultUx: true,
         useIframe: true, 
+        showDecline: true,
         useErsd: true,
         useModal: true,
     }
@@ -146,7 +148,7 @@ $(async function () {
     ];
 
     /***
-     * signClickToAgree -- start the signing process
+     * signClickToAgree 
      */
     let signClickToAgree = async function signClickToAgreeF (e) {
         e.preventDefault();
@@ -168,11 +170,12 @@ $(async function () {
             outputStyle: configuration.outputStyle,
             useIframe: configuration.useIframe,
             useModal: configuration.useModal,
+            showDecline: configuration.showDecline,
         })
     }.bind(this)
 
     /***
-     * signFocusView -- Focus View example
+     * signFocusView
      */
     let signFocusView = async function signFocusViewF (e) {
         e.preventDefault();
@@ -199,11 +202,12 @@ $(async function () {
             idvConfigId: configuration.idvConfigId,    
             smsNational: configuration.smsNational,
             smsCc: configuration.smsCc,
+            showDecline: configuration.showDecline,
             });
     }.bind(this)
 
     /***
-     * dsjsDefault -- Focus View example
+     * dsjsDefault 
      */
     let dsjsDefault = async function dsjsDefaultF (e) {
         e.preventDefault();