| Markup |
<apex:page controller="omnistudio.DocuSignCredentialController"
standardStylesheets="false"
showHeader="true"
sidebar="false"
docType="html-5.0"
action="{!checkIfThisIsFirstInstalledPackage}"
title="{!$Label.omnistudio__DocuSignCredentialSetup}">
<html xmlns:ng="http://angularjs.org" ng-app="docuSignCredential" lang="en">
<head>
<meta charset="utf-8"/>
<apex:stylesheet value="{!URLFOR($Resource.omnistudio__slds, '/assets/styles/salesforce-lightning-design-system-ltng.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.omnistudio__vlocity_assets, '/css/vlocity.css')}" />
<apex:includeScript value="{!URLFOR($Resource.omnistudio__vlocity_core_assets, '/latest/vlocity_core_assets.js')}"/>
<apex:includeScript value="{!$Resource.omnistudio__ANGULARBOOT}"/>
</head>
<style>
.slds-spinner-div {
position: absolute;
display: inline-block;
background-size: 100%;
left: 50%;
}
.slds-form-element_stacked {
margin-bottom: 0.5rem;
}
.DocuSignLoginError {
margin-top:10px;
}
.vlc-docusign-template-block h2,
.vlc-docusign-branding-block h2 {
display:inline-block;
}
.vlc-docusign-template-block .vlc-docusign-template-btn,
.vlc-docusign-branding-block .vlc-docusign-branding-btn{
float: right;
bottom: 13px;
position: relative;
}
.vlc-docusign-template-block .mask,
.vlc-docusign-branding-block .mask{
top:-100px;
left:50%;
height: 0px;
position: relative;
}
.how-to-setup {
margin-top: 4vh;
}
.how-to-setup .setup-navigation {
margin-top: 2vh;
}
.red-text {
color: red;
}
.white-text {
color: white;
}
.config-class{
padding:0px;
}
.arrowpopup {
position: relative;
display: inline-block;
cursor: pointer;
color: #006dcc;
}
.arrowpopup .tooltiptext {
visibility: hidden;
display: inline-block;
width: 20rem;
background-color: #16325c;
color: white;
text-align: left;
border-radius: 4px;
padding: 9px;
position: absolute;
bottom: 150%;
left: 0%;
margin-left: -16px;
}
.arrowpopup .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 0%;
margin-left: 14px;
border-width: 10px;
border-style: solid;
border-color: #16325c transparent transparent transparent;
}
.arrowpopup .show {
visibility: visible;
}
.via-slds .heading-height {
line-height: 2rem;
}
.via-slds .slds-table td {
vertical-align: top;
}
</style>
<script type="text/javascript">
Visualforce.remoting.timeout = 120000;
function getRegisteredDSAccount(callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.getRegisteredDSAccount}', callback,
{buffer: false, escape: false});
}
function getDSAccounts(email, password,env, callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.getDSAccounts}', email, password, env, callback,
{buffer: false, escape: false});
}
function saveUserCredential(userCredential, env, callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.saveUserCredential}', userCredential, env, callback,
{buffer: false, escape: false});
}
function saveUserNamedCredential(userCredential, env, callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.saveUserNamedCredential}', userCredential, env, callback,
{buffer: false, escape: false});
}
function fetchDocusignTemplates(callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.fetchDocusignTemplates}', callback,
{buffer: false, escape: false});
}
function getDSAccountTemplates(callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.getDSAccountTemplates}', callback,
{buffer: false, escape: false});
}
function getDocuSignAccountBranding(callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.getDocuSignAccountBranding}', callback,
{buffer: false, escape: false});
}
function displayBranding(callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.displayBranding}', callback,
{buffer: false, escape: false});
}
function getNamedCredentials(callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.getNamedCredentials}', callback,
{buffer: false, escape: false});
}
function getCustomAuthenticationSetting(callback)
{
'use strict';
Visualforce.remoting.Manager.invokeAction(
'{!$RemoteAction.DocuSignCredentialController.getCustomAuthenticationSetting}', callback,
{buffer: false, escape: false});
}
var docuSignCredential = angular.module("docuSignCredential", ['vlocity','ui.bootstrap','ngAnimate']);
docuSignCredential.factory('docuSignCredentialService', function($q, $rootScope)
{
'use strict';
var factory = {};
factory.getRegisteredDSAccount = function(){
var deferred = $q.defer();
getRegisteredDSAccount(function(result){
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.getDSAccounts = function(email, password, env){
var deferred = $q.defer();
getDSAccounts(email, password, env, function(result) {
$rootScope.$apply( function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.saveUserCredential = function(userCredential, env){
var deferred = $q.defer();
saveUserCredential(userCredential,env, function(result) {
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.saveUserNamedCredential = function(userCredential, docuSignAccntId){
var deferred = $q.defer();
saveUserNamedCredential(userCredential,docuSignAccntId, function(result) {
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.getNamedCredentials = function(){
var deferred = $q.defer();
getNamedCredentials(function(result){
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.getCustomAuthenticationSetting = function(){
var deferred = $q.defer();
getCustomAuthenticationSetting(function(result){
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.fetchDocusignTemplates = function(){
var deferred = $q.defer();
fetchDocusignTemplates(function(result){
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.getDSAccountTemplates = function(){
var deferred = $q.defer();
getDSAccountTemplates(function(result){
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.getDocuSignAccountBranding = function(){
var deferred = $q.defer();
getDocuSignAccountBranding(function(result){
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
factory.displayBranding = function(){
var deferred = $q.defer();
displayBranding(function(result){
$rootScope.$apply(function() {
deferred.resolve(result);
});
});
return deferred.promise;
};
return factory;
});
docuSignCredential.controller('docuSignCredentialController', function($scope, docuSignCredentialService)
{
'use strict';
$scope.docuSignReponse;
$scope.namedCredentialList;
$scope.namespaceprefix = '{!namespacePrefix}';
$scope.namespacedAccountName = $scope.namespaceprefix + 'AccountName__c';
$scope.namespacedAccountIdGuid = $scope.namespaceprefix + 'AccountIdGuid__c';
$scope.namespacedUrl = $scope.namespaceprefix + 'BaseUrl__c';
$scope.namespacedEnv = $scope.namespaceprefix + 'Environment__c';
$scope.registeredDSAccnt = {};
$scope.dsAccntRegistered = true;
$scope.isFoundation = {!JSENCODE(IF(isFoundation, "true", "false"))};
$scope.namedCredentialName='';
$scope.docuSignAccntId='';
$scope.userEmail='';
$scope.userPwd='';
$scope.environment = '';
$scope.userAPIPwd = '';
$scope.userDSAccounts = [];
$scope.numAccounts = 0;
$scope.accountSelected = false; //in case customer who has more than one DocuSign Account
$scope.selectedAccount = {};
$scope.errorInfo = {};
$scope.brandings = [];
$scope.brandLoading = false;
$scope.formError={};
$scope.formError.namedCredentialError=false;
$scope.formError.accountId=false;
$scope.namedCredentials = JSON.parse('{!getDocuSignNamedCredential}');
$scope.namedCredentials = $scope.namedCredentials.namedCredential != null ? $scope.namedCredentials:'';
$scope.docusignNamedCredentialDocUrl = "https://help.salesforce.com/s/articleView?id=sf.os_omniscript_create_oauth_2_named_credentials.htm&type=5";
$scope.docusignAccountIdDocUrl = "https://help.salesforce.com/s/articleView?language=en_US&id=sf.os_omniscript_get_docusign_templates_in_omnistudio.htm&type=5";
$scope.hoverIn = function(id){
var tt = document.getElementById(id);
tt.classList.add("show");
};
$scope.hoverOut = function(id){
var tt = document.getElementById(id);
tt.classList.remove("show");
};
docuSignCredentialService.getRegisteredDSAccount().then(function(result, event)
{
$scope.registeredDSAccnt = angular.fromJson(result);
if(!$scope.registeredDSAccnt[$scope.namespacedAccountName])
{
$scope.dsAccntRegistered = false;
}
});
$scope.modifyAccountConfigure = function(login)
{
$scope.dsAccntRegistered = false;
$scope.getCustomAuthenticationSetting(login);
};
$scope.getUserInfo = function(email, pwd, env)
{
$scope.loading = true;
docuSignCredentialService.getDSAccounts(email, pwd, env).then(function(result, event)
{
var userDSInfo = angular.fromJson(result);
if(userDSInfo)
{
if( !userDSInfo.hasOwnProperty('errorCode'))
{
$scope.errorInfo = {};
$scope.userAPIPwd = userDSInfo.apiPassword;
$scope.numAccounts = userDSInfo.loginAccounts.length;
for(var i=0; i<$scope.numAccounts && $scope.numAccounts > 1;i++)
{
var dsAccnt = userDSInfo.loginAccounts[i];
dsAccnt.apiPassword = userDSInfo.apiPassword;
dsAccnt.isSelected = false;
dsAccnt.disabled = '';
$scope.userDSAccounts.push(dsAccnt);
}
if($scope.numAccounts == 1)
{
//save the only account
userDSInfo.loginAccounts[0].apiPassword = userDSInfo.apiPassword;
$scope.saveSelectedAccount(userDSInfo.loginAccounts[0],env);
}
}
else
{
$scope.loading = false;
$scope.errorInfo.errorCode = userDSInfo.errorCode;
$scope.errorInfo.errorMessage = userDSInfo.errorCode + ' : ' + userDSInfo.message;
}
}
});
};
$scope.getUserNamedCredentialInfo = function(namedCredentialName,docuSignAccntId)
{
var flag=true;
$scope.loading = true;
$scope.formError.namedCredentialError=false;
if(namedCredentialName == '' || namedCredentialName == undefined)
{
$scope.loading = false;
flag=false;
$scope.formError.namedCredentialError=true;
}
if(docuSignAccntId == '' || docuSignAccntId == undefined)
{
$scope.loading = false;
flag=false;
$scope.formError.accountIdError=true;
}
if(flag){
$scope.formError.namedCredentialError=false;
$scope.formError.accountIdError=false;
docuSignCredentialService.saveUserNamedCredential(namedCredentialName, docuSignAccntId).then(function(result, event)
{
var userDSInfo = angular.fromJson(result);
$scope.loading = false;
if(userDSInfo){
if( !userDSInfo.hasOwnProperty('errorCode')){
$scope.registeredDSAccnt[$scope.namespacedAccountName] = namedCredentialName;
$scope.registeredDSAccnt[$scope.namespacedAccountIdGuid] = docuSignAccntId;
$scope.registeredDSAccnt[$scope.namespacedUrl] = result.replace(/"/g, '');
$scope.dsAccntRegistered = true;
$scope.brandings = [];
$scope.getDocuSignAccountBranding();
$scope.getDSAccountTemplates();
$scope.getCustomAuthenticationSetting();
}else{
$scope.loading = false;
$scope.errorInfo.errorCode = userDSInfo.errorCode;
$scope.errorInfo.errorMessage = userDSInfo.errorCode + ' : ' + userDSInfo.message;
}
}
}).catch(e=>{
$scope.loading = false
$scope.errorInfo.errorCode = 500;
$scope.errorInfo.errorMessage = 'Unexpected Exception : ' + e.message ? e.message : JSON.stringify(e, null, 2);
});
}
};
$scope.onChangeAccount = function(accnt)
{
if(accnt.isSelected === true)
{
$scope.accountSelected = true;
$scope.selectedAccount = accnt;
for(var i=0; i<$scope.numAccounts; i++)
{
if ($scope.userDSAccounts[i].accountId !== accnt.accountId && $scope.userDSAccounts[i].isSelected === true)
{
$scope.userDSAccounts[i].isSelected = false;
}
}
}
else
{
$scope.accountSelected = false;
$scope.selectedAccount ={};
}
};
$scope.saveSelectedAccount = function(accnt, env)
{
$scope.registeredDSAccnt[$scope.namespacedAccountName] = accnt.name;
$scope.registeredDSAccnt[$scope.namespacedAccountIdGuid] = accnt.accountIdGuid;
$scope.registeredDSAccnt[$scope.namespacedEnv] = env;
$scope.dsAccntRegistered = true;
$scope.brandings = [];
docuSignCredentialService.saveUserCredential(angular.toJson(accnt), env).then(function(result, event)
{
$scope.loading = false;
$scope.getDocuSignAccountBranding();
$scope.getDSAccountTemplates();
$scope.getCustomAuthenticationSetting();
});
};
$scope.getNamedCredentials = function()
{
var resp = null;
docuSignCredentialService.getNamedCredentials().then(function(result, event)
{
resp = angular.fromJson(result);
if(resp.Error)
window.alert(resp.Error);
else{
$scope.namedCredentialList = resp;
$scope.namedCredentialName = $scope.namedCredentialList[0].value;
}
});
};
$scope.getCustomAuthenticationSetting = function(login)
{
var resp = null;
docuSignCredentialService.getCustomAuthenticationSetting().then(function(result, event)
{
resp = angular.fromJson(result);
if(resp.Error)
window.alert(resp.Error);
else{
if(typeof login != "undefined"){
if(login != resp.loginPage)
login=resp.loginPage;
resp['login'] = 'true';
resp['loginPage'] = login;
resp['oAuth1'] = 'false';
resp['oAuth2'] = 'false';
}
$scope.docuSignReponse = resp;
}
});
};
$scope.cancelAccountChange = function()
{
window.location.reload();
};
$scope.fetchDocusignTemplates = function()
{
var resp = null;
$scope.loading = true;
docuSignCredentialService.fetchDocusignTemplates().then(function(result, event)
{
$scope.loading = false;
resp = angular.fromJson(result);
if(resp.Error)
window.alert(resp.Error);
else
$scope.templates = resp;
});
};
$scope.getDSAccountTemplates = function()
{
var resp = null;
docuSignCredentialService.getDSAccountTemplates().then(function(result, event)
{
resp = angular.fromJson(result);
if(resp.Error)
window.alert(resp.Error);
else
$scope.templates = resp;
});
};
$scope.displayBranding = function()
{
docuSignCredentialService.displayBranding().then(function(result, event){
$scope.brandings = result.length? angular.fromJson(result): [];
});
};
$scope.getDocuSignAccountBranding = function()
{
$scope.brandLoading = true;
docuSignCredentialService.getDocuSignAccountBranding().then(function(result,event){
$scope.brandLoading = false;
var resp = angular.fromJson(result);
if(resp.Error === 'OK'){
$scope.brandings = resp.brands;
}
else {
window.alert(resp.Error);
}
});
};
});
</script>
<body>
<div class="via-slds" ng-controller="docuSignCredentialController" ng-init="getDSAccountTemplates();displayBranding();">
<div class="slds-form-element" ng-if="!isFoundation" ng-init="getCustomAuthenticationSetting();">
<div class="title">
<h2 class="slds-text-heading_medium slds-form-element_stacked heading-height">{!$Label.VlocityDocuSignAdmin}</h2>
</div>
<!--Named Credentials Setup-->
<div ng-if="docuSignReponse.loginPage == '2'" ng-init="getNamedCredentials();">
<div class="Login" ng-if="docuSignReponse.login == 'true'">
<h2 class="slds-text-heading_medium slds-form-element_stacked heading-height">{!$Label.VlocityDocuSignLogin}</h2>
<div class="slds-spinner-div" ng-show="loading" dir="rtl">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<form autocomplete="off" class="slds-form">
<div class="slds-form-element slds-form-element_stacked {{(namedCredentialName =='' || namedCredentialName == undefined) && formError.namedCredentialError ? 'slds-has-error' : '' }}" >
<label class="slds-form-element__label" for="inputNamedCredential"><abbr class="slds-required" title="required">* </abbr>{!$Label.VlocityDocuSignNamedCredentialsLabel}
<span class="arrowpopup" ng-mouseover="hoverIn('namedCredentialTooltip')" ng-mouseleave="hoverOut('namedCredentialTooltip')" href="#"><i class="icon icon-v-information"></i>
<div class="tooltiptext" id="namedCredentialTooltip">{!$Label.DocusignNamedCredentialHelpText} <a ng-href="{{docusignNamedCredentialDocUrl}}">{!$Label.DocusignLinkText}</a></div>
</span>
</label>
<div class="slds-form-element__control" >
<div class="slds-select_container">
<select id="inputNamedCredential" ng-model="namedCredentialName" class="slds-select" >
<option ng-repeat="namedCredential in namedCredentialList" value="{{namedCredential.value}}">{{namedCredential.label}}</option>
</select>
</div>
</div>
<div class="slds-form-element__help" ng-show="(namedCredentialName =='' || namedCredentialName == undefined) && formError.namedCredentialError">{!$Label.DocusignNamedCredentialError}</div>
</div>
<div class="slds-form-element slds-form-element_stacked {{(docuSignAccntId == '' || docuSignAccntId == undefined) && formError.accountIdError ? 'slds-has-error' : '' }}" >
<label class="slds-form-element__label" for="docuSignAccntId">
<abbr class="slds-required" title="required">* </abbr>{!$Label.VlocityDocuSignAccountId}
<span class="arrowpopup" ng-mouseover="hoverIn('accountIdtooltip')" ng-mouseleave="hoverOut('accountIdtooltip')" href="#"><i class="icon icon-v-information"></i>
<div class="tooltiptext" id="accountIdtooltip">{!$Label.AccountIdHelpText} <a ng-href="{{docusignAccountIdDocUrl}}">{!$Label.DocusignLinkText}</a></div>
</span>
</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="docuSignAccntId" ng-model="docuSignAccntId" placeholder="{!$Label.VlocityDocuSignAccountId}" />
</div>
<div class="slds-form-element__help" ng-show="(docuSignAccntId == '' || docuSignAccntId == undefined) && formError.accountIdError">{!$Label.DocusignAccountIdError}</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button type="submit" class="slds-button slds-button_brand" ng-click="getUserNamedCredentialInfo(namedCredentialName, docuSignAccntId)">{!$Label.VlocityDocuSignLoginButton}</button>
</div>
</div>
<div class='DocuSignLoginError' ng-show="errorInfo.hasOwnProperty('errorCode')">
<p class="red-text" >{{errorInfo.errorMessage}}</p>
</div>
</form>
<div class='DocuSignAccounts' ng-if="numAccounts > 1" >
<h2 class="slds-text-heading_medium heading-height">{!$Label.VlocityDocuSignChooseAccount}</h2>
<form class="form-inline" ng-repeat="userDSAcc in userDSAccounts">
<div class="form-group">
<label for="docuSignAccntName">{!$Label.VlocityDocuSignAccountName}</label>
<input type="text" class="form-control" id="docuSignAccntName" ng-model="userDSAcc.name" disabled="disabled"/>
</div>
<div class="form-group">
<label for="docuSignAccntId">{!$Label.VlocityDocuSignAccountId}</label>
<input type="text" class="form-control" id="docuSignAccntId" ng-model="userDSAcc.accountIdGuid" disabled="disabled"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="userDSAcc.isSelected" ng-change="onChangeAccount(userDSAcc)"/> {!$Label.VlocityDocuSignUseThisAccount}
</label>
</div>
</form>
<button type="submit" class="btn btn-default" ng-click="saveSelectedAccount(selectedAccount, environment)" ng-if="accountSelected">{!$Label.VlocityDocuSignSubmit}</button>
<button type="submit" class="btn btn-default" ng-click="cancelAccountChange()" ng-if="!accountSelected">{!$Label.Cancel}</button>
</div>
</div>
<div class='registeredDSAccount' ng-if="docuSignReponse.oAuth2 == 'true' && dsAccntRegistered">
<h2 class="slds-text-heading_medium heading-height">{!$Label.VlocityDocuSignAccountInfo}</h2>
<form class="slds-form">
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="registeredDSAccntName">{!$Label.VlocityDocuSignAccountName}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="registeredDSAccntName" ng-model="registeredDSAccnt[namespacedAccountName]" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label for="registeredDSAccntId" class="slds-form-element__label">{!$Label.VlocityDocuSignAccountId}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="registeredDSAccntId" ng-model="registeredDSAccnt[namespacedAccountIdGuid]" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label for="registeredDSEnv" class="slds-form-element__label">{!$Label.VlocityDocuSignNamedCredentialsUrl}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="registeredDSEnv" ng-model="registeredDSAccnt[namespacedUrl]" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button type="submit" class="slds-button slds-button_brand" ng-click="modifyAccountConfigure('2')">{!$Label.VlocityDocuSignModifyConfig}</button>
</div>
</div>
</form>
</div>
<div class='slds-form-element vlc-docusign-template-block' ng-if="docuSignReponse.oAuth2 == 'true' && dsAccntRegistered">
<div class="slds-spinner-div" ng-show="loading" dir="rtl">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<h2 class="slds-text-heading_medium heading-height">{!$Label.DocuSignTemplateList}</h2>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button class="vlc-docusign-template-btn slds-button slds-button_brand" ng-click = "fetchDocusignTemplates()">{!$Label.DocuSignTemplateFetch}</button>
</div>
</div>
<form class="slds-form">
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<table class='slds-table slds-table_bordered slds-table_fixed-layout'>
<thead>
<tr>
<th>{!$Label.DocuSignTemplateName}</th>
<th>{!$Label.DocuSignLastModifiedDate}</th>
<th>{!$Label.DocuSignTemplateDesc}</th>
</tr>
</thead>
<tbody class="upgrade-tbody-omni" >
<tr ng-repeat = "template in templates">
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input class='slds-input' type='text' ng-model="template.Name" disabled="disabled"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input type='text' class='slds-input' value="{{template.LastModifiedDate | date:'MM-dd-yyyy h:mm:ss a'}}" disabled="disabled"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<textarea class='slds-textarea' ng-model="template[namespaceprefix + 'Description__c']" type='text' disabled="disabled"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>
</div>
<div class='slds-form-element vlc-docusign-branding-block' ng-if="dsAccntRegistered && !isFoundation && docuSignReponse.oAuth2 == 'true'">
<div class="slds-spinner-div" ng-show="brandLoading" dir="rtl">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<h2 class="slds-text-heading_medium heading-height">{!$Label.VlocityDocuSignBrandings}</h2>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button class="vlc-docusign-branding-btn slds-button slds-button_brand" ng-click = "getDocuSignAccountBranding()">{!$Label.VlocityDocusignFetchBranding}</button>
</div>
</div>
<form class="slds-form">
<div class="slds-form-element slds-form-element_stacked">
<table class='slds-table slds-table_bordered slds-table_fixed-layout'>
<thead>
<tr>
<th>{!$Label.DocuSignBrandName}</th>
<th>{!$Label.DocuSignBrandCompany}</th>
</tr>
</thead>
<tbody class="upgrade-tbody-omni" >
<tr ng-repeat = "brand in brandings">
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input class='slds-input' type='text' ng-model="brand.Name" disabled="disabled"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input class='slds-input' type='text' ng-model="brand[namespaceprefix+'BrandCompany__c']" disabled="disabled"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
<div ng-if="docuSignReponse.loginPage == '1'">
<div class="Login" ng-if="docuSignReponse.login == 'true'">
<h2 class="slds-text-heading_medium slds-form-element_stacked heading-height">{!$Label.VlocityDocuSignLogin}</h2>
<div class="slds-spinner-div" ng-show="loading" dir="rtl">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<form class="slds-form">
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="inputEmail">{!$Label.VlocityDocuSignUserEmail}</label>
<div class="slds-form-element__control">
<input type="email" class="slds-input" id="inputEmail" ng-model="userEmail" placeholder="{!$Label.VlocityDocuSignEnterEmail}" />
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="inputPassword">{!$Label.VlocityDocuSignUserPassword}</label>
<div class="slds-form-element__control">
<input type="password" class="slds-input" id="inputPassword" ng-model="userPwd" placeholder="{!$Label.VlocityDocuSignUserPassword}" />
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="inputEnv">{!$Label.VlocityDocuSignEnvironment}</label>
<div class="slds-select_container">
<div class="slds-select_container">
<select class="slds-select" id="inputEnv" ng-model="environment" >
<option value="Demo">{!$Label.VlocityDocuSignDemo}</option>
<option value="Production">{!$Label.VlocityDocuSignProduction}</option>
</select>
</div>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button type="submit" class="slds-button slds-button_brand" ng-click="getUserInfo(userEmail, userPwd, environment)">{!$Label.VlocityDocuSignLoginButton}</button>
<button type="submit" class="slds-button slds-button_brand" ng-click="cancelAccountChange()" ng-if="numAccounts === 0">{!$Label.Cancel}</button>
</div>
</div>
<div class='DocuSignLoginError' ng-show="errorInfo.hasOwnProperty('errorCode')">
<p class="red-text" >{{errorInfo.errorMessage}}</p>
</div>
</form>
<div class='DocuSignAccounts' ng-if="numAccounts > 1" >
<h2 class="slds-text-heading_medium slds-form-element_stacked heading-height">{!$Label.VlocityDocuSignChooseAccount}</h2>
<form class="slds-form" ng-repeat="userDSAcc in userDSAccounts">
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="docuSignAccntName">{!$Label.VlocityDocuSignAccountName}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="docuSignAccntName" ng-model="userDSAcc.name" readonly="true"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="docuSignAccntId">{!$Label.VlocityDocuSignAccountId}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="docuSignAccntId" ng-model="userDSAcc.accountIdGuid" readonly="true"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label"> <input type="checkbox" ng-model="userDSAcc.isSelected" ng-change="onChangeAccount(userDSAcc)"/> {!$Label.VlocityDocuSignUseThisAccount}</label>
</div>
</form>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button type="submit" class="slds-button slds-button_brand" ng-click="saveSelectedAccount(selectedAccount, environment)" ng-if="accountSelected">{!$Label.VlocityDocuSignSubmit}</button>
<button type="submit" class="slds-button slds-button_brand" ng-click="cancelAccountChange()" ng-if="!accountSelected">{!$Label.Cancel}</button>
</div>
</div>
</div>
</div>
<div class='registeredDSAccount' ng-if="docuSignReponse.oAuth1 == 'true' && dsAccntRegistered">
<h2 class="slds-text-heading_medium heading-height">{!$Label.VlocityDocuSignAccountInfo}</h2>
<form class="slds-form">
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="registeredDSAccntName">{!$Label.VlocityDocuSignAccountName}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="registeredDSAccntName" ng-model="registeredDSAccnt[namespacedAccountName]" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="registeredDSAccntId">{!$Label.VlocityDocuSignAccountId}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="registeredDSAccntId" ng-model="registeredDSAccnt[namespacedAccountIdGuid]" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label class="slds-form-element__label" for="registeredDSEnv">{!$Label.VlocityDocuSignEnvironment}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="registeredDSEnv" ng-model="registeredDSAccnt[namespacedEnv]" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button type="submit" class="slds-button slds-button_brand" ng-click="modifyAccountConfigure('1')">{!$Label.VlocityDocuSignModifyConfig}</button>
</div>
</div>
</form>
</div>
<div class='vlc-docusign-template-block' ng-if="docuSignReponse.oAuth1 == 'true' && dsAccntRegistered">
<div class="slds-spinner-div" ng-show="loading" dir="rtl">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<h2 class="slds-text-heading_medium heading-height">{!$Label.DocuSignTemplateList}</h2>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button class="vlc-docusign-template-btn slds-button slds-button_brand" ng-click = "fetchDocusignTemplates()">{!$Label.DocuSignTemplateFetch}</button>
</div>
</div>
<form class="slds-form">
<div class="form-group">
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<table class='slds-table slds-table_bordered slds-table_fixed-layout'>
<thead>
<tr>
<th>{!$Label.DocuSignTemplateName}</th>
<th>{!$Label.DocuSignLastModifiedDate}</th>
<th>{!$Label.DocuSignTemplateDesc}</th>
</tr>
</thead>
<tbody class="upgrade-tbody-omni" >
<tr ng-repeat = "template in templates">
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input class='slds-input' type='text' ng-model="template.Name" readonly="true"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input type='text' class='slds-input' value="{{template.LastModifiedDate | date:'MM-dd-yyyy h:mm:ss a'}}" readonly="true"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<textarea class='slds-textarea' ng-model="template[namespaceprefix + 'Description__c']" type='text' readonly="true"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</form>
</div>
<div class='vlc-docusign-branding-block' ng-if="dsAccntRegistered && !isFoundation && docuSignReponse.oAuth1 == 'true'">
<div class="slds-spinner-div" ng-show="brandLoading" dir="rtl">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<h2 class="slds-text-heading_medium heading-height">{!$Label.VlocityDocuSignBrandings}</h2>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button class="vlc-docusign-branding-btn slds-button slds-button_brand" ng-click = "getDocuSignAccountBranding()">{!$Label.VlocityDocusignFetchBranding}</button>
</div>
</div>
<form class="slds-form">
<div class="slds-form-element slds-form-element_stacked">
<table class='slds-table slds-table_bordered slds-table_fixed-layout'>
<thead>
<tr>
<th>{!$Label.DocuSignBrandName}</th>
<th>{!$Label.DocuSignBrandCompany}</th>
</tr>
</thead>
<tbody class="upgrade-tbody-omni" >
<tr ng-repeat = "brand in brandings">
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input class='slds-input' type='text' ng-model="brand.Name" disabled="disabled"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input class='slds-input' type='text' ng-model="brand[namespaceprefix+'BrandCompany__c']" disabled="disabled"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
<div ng-if="isFoundation">
<div class="title">
<h2 class="slds-text-heading_medium heading-height">{!$Label.VlocityDocuSignAdmin}</h2>
</div>
<div class="NewUserSetup" ng-if="!namedCredentials">
<div class="how-to-setup">
<p>{!$Label.NCSetupLabel}</p>
<ul class="config-class">
<li><p>{!$Label.OmniInteractionExample}</p></li>
<li><p>{!$Label.OmniInteractionAccountIdExample}</p></li>
</ul>
</div>
</div>
<div ng-if="namedCredentials">
<div class="ReadOnlyNC slds-form">
<h2 class="slds-text-heading_medium heading-height">{!$Label.VlocityDocuSignAccountInfo}</h2>
<form>
<div class="slds-form-element slds-form-element_stacked">
<label for="NamedCredentialsLabel" class="slds-form-element__label">{!$Label.VlocityDocuSignNamedCredentialsLabel}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" ng-model="namedCredentials.namedCredential.DeveloperName" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label for="NamedCredentialsUrl" class="slds-form-element__label">{!$Label.VlocityDocuSignNamedCredentialsUrl} </label>
<div class="slds-form-element__control">
<input type="url" class="slds-input" ng-model="namedCredentials.namedCredential.Endpoint" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked">
<label for="docuSignAccntId" class="slds-form-element__label">{!$Label.VlocityDocuSignAccountId}</label>
<div class="slds-form-element__control">
<input type="text" class="slds-input" id="docuSignAccntId" ng-model="namedCredentials.docuSignAccountId" disabled="disabled"/>
</div>
</div>
<div class="slds-form-element slds-form-element_stacked" ng-if="namedCredentials.docuSignAccountId == null">
<p class="red-text">{!$Label.DocuSignAccountIdInstruction}</p>
</div>
</form>
</div>
</div>
<div class='slds-form-element vlc-docusign-template-block' ng-if="namedCredentials">
<div class="slds-spinner-div" ng-show="loading" dir="rtl">
<div role="status" class="slds-spinner slds-spinner_medium">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
<h2 class="slds-text-heading_medium heading-height">{!$Label.DocuSignTemplateList}</h2>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<button ng-disabled="(!namedCredentials || loading)" class="vlc-docusign-template-btn slds-button slds-button_brand" ng-click = "fetchDocusignTemplates()">{!$Label.DocuSignTemplateFetch}</button>
</div>
</div>
<form class="slds-form">
<div class="slds-form-element slds-form-element_stacked">
<table class='slds-table slds-table_bordered slds-table_fixed-layout'>
<thead>
<tr>
<th>{!$Label.DocuSignTemplateName}</th>
<th>{!$Label.DocuSignLastModifiedDate}</th>
<th>{!$Label.DocuSignTemplateDesc}</th>
</tr>
</thead>
<tbody class="upgrade-tbody-omni" >
<tr ng-repeat = "template in templates">
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input class='slds-input' type='text' ng-model="template.Name" disabled="disabled"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<input type='text' class='slds-input' value="{{template.LastModifiedDate | date:'MM-dd-yyyy h:mm:ss a'}}" disabled="disabled"/>
</div>
</div>
</td>
<td>
<div class="slds-form-element slds-form-element_stacked">
<div class="slds-form-element__control">
<textarea class='slds-textarea' ng-model="template['Description']" type='text' disabled="disabled"/>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
</apex:page> |
