@verdocs/web-sdk 5.0.11 → 5.0.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/dist/cjs/verdocs-preview_6.cjs.entry.js +14 -7
  2. package/dist/cjs/verdocs-sign.cjs.entry.js +2 -2
  3. package/dist/collection/components/embeds/verdocs-send/verdocs-send.js +13 -6
  4. package/dist/collection/components/embeds/verdocs-sign/verdocs-sign.js +2 -2
  5. package/dist/collection/components/templates/verdocs-template-roles/verdocs-template-roles.js +1 -3
  6. package/dist/components/{p-0689fc47.js → p-022b87d3.js} +14 -7
  7. package/dist/components/{p-a60453aa.js → p-56e4effa.js} +1 -1
  8. package/dist/components/verdocs-build.js +2 -2
  9. package/dist/components/verdocs-send.js +1 -1
  10. package/dist/components/verdocs-sign.js +2 -2
  11. package/dist/components/verdocs-template-roles.js +1 -1
  12. package/dist/esm/verdocs-preview_6.entry.js +15 -8
  13. package/dist/esm/verdocs-sign.entry.js +2 -2
  14. package/dist/esm-es5/verdocs-preview_6.entry.js +2 -2
  15. package/dist/esm-es5/verdocs-sign.entry.js +1 -1
  16. package/dist/types/components/fields/verdocs-field-signature/verdocs-field-signature.d.ts +2 -2
  17. package/dist/verdocs-web-sdk/p-41f22b0a.system.entry.js +1 -0
  18. package/dist/verdocs-web-sdk/p-98ab739b.entry.js +1 -0
  19. package/dist/verdocs-web-sdk/p-bf0b5dbc.entry.js +8 -0
  20. package/dist/verdocs-web-sdk/p-e2b70dfb.system.js +1 -1
  21. package/dist/verdocs-web-sdk/{p-2b7edf3a.system.entry.js → p-e77c1fcc.system.entry.js} +2 -2
  22. package/dist/verdocs-web-sdk/verdocs-web-sdk.esm.js +1 -1
  23. package/package.json +1 -1
  24. package/dist/verdocs-web-sdk/p-9233595a.entry.js +0 -1
  25. package/dist/verdocs-web-sdk/p-94ffe928.entry.js +0 -8
  26. package/dist/verdocs-web-sdk/p-ba92b80b.system.entry.js +0 -1
@@ -135,6 +135,7 @@ const VerdocsSend = class {
135
135
  this.template = template;
136
136
  this.loading = false;
137
137
  this.rolesCompleted = {};
138
+ this.recomputeRolesCompleted();
138
139
  });
139
140
  }
140
141
  unlistenToTemplate() {
@@ -222,8 +223,8 @@ const VerdocsSend = class {
222
223
  ...role,
223
224
  id: `r-${level}-${index}`,
224
225
  role_name: role.name,
225
- first_name: '',
226
- last_name: '',
226
+ first_name: role.first_name,
227
+ last_name: role.last_name,
227
228
  }));
228
229
  return rolesAtLevel;
229
230
  }
@@ -301,17 +302,23 @@ const VerdocsSend = class {
301
302
  return (index$1.h(index$1.Host, { style: { display: 'flex' } }, index$1.h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
302
303
  }
303
304
  const levels = this.getLevels();
304
- const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email));
305
+ const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => jsSdk.isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);
305
306
  // TODO: Reactivate once SMS is re-enabled
306
307
  // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
307
308
  const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
308
309
  return (index$1.h(index$1.Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, index$1.h("div", { class: "recipients" }, index$1.h("div", { class: "left-line" }), index$1.h("div", { class: `level level-start` }, this.getLevelIcon(-1), index$1.h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (index$1.h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
309
- var _a, _b, _c, _d;
310
- const unknown = !role.email;
310
+ var _a, _b, _c;
311
+ const unknown = !role.email || !role.first_name || !role.last_name;
312
+ const roleName = ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : jsSdk.formatFullName(role);
311
313
  const elId = `verdocs-send-recipient-${role.role_name}`;
312
314
  const roleIndex = getRoleIndex(this.template, role.role_name);
313
315
  const rgba = jsSdk.getRGBA(roleIndex);
314
- return unknown ? (index$1.h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: { backgroundColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : role.role_name, index$1.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index$1.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index$1.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index$1.h("div", { class: "recipient", style: { borderColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? jsSdk.formatFullName(this.rolesCompleted[role.id]) : role.role_name, index$1.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index$1.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index$1.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
316
+ const completed = rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
317
+ const style = {
318
+ backgroundColor: rgba,
319
+ border: completed ? '2px solid #55bc81' : '2px solid #dddddd',
320
+ };
321
+ return unknown ? (index$1.h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, index$1.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index$1.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index$1.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (index$1.h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, index$1.h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (index$1.h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, index$1.h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
315
322
  })))), index$1.h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), index$1.h("div", { class: "complete" }, "Signing Complete"))), index$1.h("div", { class: "buttons" }, index$1.h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), index$1.h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && index$1.h("verdocs-spinner", null))));
316
323
  }
317
324
  static get watchers() { return {
@@ -3848,7 +3855,7 @@ const VerdocsTemplateRoles = class {
3848
3855
  console.log('Rendering sequences', sequences, roleNames);
3849
3856
  // style={{backgroundColor: getRGBA(getRoleIndex(this.template, role.name))}}
3850
3857
  return (index$1.h(index$1.Host, { class: { dragging: this.dragging } }, index$1.h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, index$1.h("h5", null, "Roles and Workflow"), index$1.h("div", { class: "roles" }, sequences.map(sequence => (index$1.h("div", { class: "sequence" }, index$1.h("div", { class: "sequence-label no-drag" }, sequence, "."), index$1.h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequence}`, "data-sequence": sequence }, this.getRolesAtSequence(sequence).map(role => {
3851
- const unknown = !role.email;
3858
+ const unknown = !role.email || !role.first_name || !role.last_name;
3852
3859
  return unknown ? (index$1.h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index$1.h("div", { class: "role-name" }, role.name), index$1.h("div", { class: "icons" }, index$1.h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), index$1.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover })))) : (index$1.h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, index$1.h("div", { class: "role-name" }, jsSdk.formatFullName(role)), index$1.h("div", { class: "icons" }, index$1.h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), index$1.h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }))));
3853
3860
  })), index$1.h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) })))), index$1.h("div", { class: "sequence add-sequence" }, index$1.h("div", { class: "sequence-label no-drag" }, sequences.length + 1, "."), index$1.h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequences.length + 1}`, "data-sequence": sequences.length + 1 }), index$1.h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequences.length + 1) }))), roleNames.length < 1 && (index$1.h("div", { class: "empty" }, "You must add at least one Role before proceeding.", index$1.h("br", null), " Click the ", index$1.h("span", { innerHTML: plusIcon }), " Add button above to get started.")), index$1.h("div", { class: "buttons" }, index$1.h("div", { class: "flex-fill" }), index$1.h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), index$1.h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (index$1.h("verdocs-menu-panel", { onClose: () => (this.showingRoleDialog = null) }, index$1.h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
3854
3861
  var _a;
@@ -220,7 +220,7 @@ const VerdocsSign = class {
220
220
  }
221
221
  }
222
222
  updateRecipientFieldValue(fieldName, updateResult) {
223
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
223
+ console.log('[SIGN] updateRecipientFieldValue', fieldName, updateResult);
224
224
  this.getRecipientFields().forEach(oldField => {
225
225
  if (oldField.name === fieldName) {
226
226
  oldField.value = updateResult.value;
@@ -232,7 +232,7 @@ const VerdocsSign = class {
232
232
  });
233
233
  }
234
234
  saveFieldChange(fieldName, fields) {
235
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
235
+ console.log('[SIGN] saveFieldChange', fieldName, fields);
236
236
  jsSdk.updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
237
237
  .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
238
238
  .catch(e => {
@@ -49,6 +49,7 @@ export class VerdocsSend {
49
49
  this.template = template;
50
50
  this.loading = false;
51
51
  this.rolesCompleted = {};
52
+ this.recomputeRolesCompleted();
52
53
  });
53
54
  }
54
55
  unlistenToTemplate() {
@@ -136,8 +137,8 @@ export class VerdocsSend {
136
137
  ...role,
137
138
  id: `r-${level}-${index}`,
138
139
  role_name: role.name,
139
- first_name: '',
140
- last_name: '',
140
+ first_name: role.first_name,
141
+ last_name: role.last_name,
141
142
  }));
142
143
  return rolesAtLevel;
143
144
  }
@@ -215,17 +216,23 @@ export class VerdocsSend {
215
216
  return (h(Host, { style: { display: 'flex' } }, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
216
217
  }
217
218
  const levels = this.getLevels();
218
- const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email));
219
+ const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);
219
220
  // TODO: Reactivate once SMS is re-enabled
220
221
  // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
221
222
  const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
222
223
  return (h(Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
223
- var _a, _b, _c, _d;
224
- const unknown = !role.email;
224
+ var _a, _b, _c;
225
+ const unknown = !role.email || !role.first_name || !role.last_name;
226
+ const roleName = ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : formatFullName(role);
225
227
  const elId = `verdocs-send-recipient-${role.role_name}`;
226
228
  const roleIndex = getRoleIndex(this.template, role.role_name);
227
229
  const rgba = getRGBA(roleIndex);
228
- return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: { backgroundColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
230
+ const completed = rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
231
+ const style = {
232
+ backgroundColor: rgba,
233
+ border: completed ? '2px solid #55bc81' : '2px solid #dddddd',
234
+ };
235
+ return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
229
236
  })))), h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
230
237
  }
231
238
  static get is() { return "verdocs-send"; }
@@ -226,7 +226,7 @@ export class VerdocsSign {
226
226
  }
227
227
  }
228
228
  updateRecipientFieldValue(fieldName, updateResult) {
229
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
229
+ console.log('[SIGN] updateRecipientFieldValue', fieldName, updateResult);
230
230
  this.getRecipientFields().forEach(oldField => {
231
231
  if (oldField.name === fieldName) {
232
232
  oldField.value = updateResult.value;
@@ -238,7 +238,7 @@ export class VerdocsSign {
238
238
  });
239
239
  }
240
240
  saveFieldChange(fieldName, fields) {
241
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
241
+ console.log('[SIGN] saveFieldChange', fieldName, fields);
242
242
  updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
243
243
  .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
244
244
  .catch(e => {
@@ -1,8 +1,6 @@
1
1
  import Sortable from "sortablejs";
2
2
  import { h, Host } from "@stencil/core";
3
3
  import { createTemplateRole, formatFullName, getTemplate, updateTemplateRole, VerdocsEndpoint } from "@verdocs/js-sdk";
4
- // import {createTemplateRole, formatFullName, getRGBA, getTemplate, IRole, ITemplate, updateTemplateRole, VerdocsEndpoint} from '@verdocs/js-sdk';
5
- // import {getRoleIndex} from '../../../utils/Templates';
6
4
  import { SDKError } from "../../../utils/errors";
7
5
  import { Store } from "../../../utils/Datastore";
8
6
  const settingsIcon = '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" fill="#00000089"><path d="m8.021 17.917-.313-2.5q-.27-.125-.625-.334-.354-.208-.625-.395l-2.312.979-1.979-3.438 1.979-1.5q-.021-.167-.031-.364-.011-.198-.011-.365 0-.146.011-.344.01-.198.031-.385l-1.979-1.5 1.979-3.417 2.312.958q.271-.187.615-.385t.635-.344l.313-2.5h3.958l.313 2.5q.312.167.625.344.312.177.604.385l2.333-.958 1.979 3.417-1.979 1.521q.021.187.021.364V10q0 .146-.01.333-.011.188-.011.396l1.958 1.5-1.979 3.438-2.312-.979q-.292.208-.615.395-.323.188-.614.334l-.313 2.5Zm1.937-5.355q1.063 0 1.813-.75t.75-1.812q0-1.062-.75-1.812t-1.813-.75q-1.041 0-1.802.75-.76.75-.76 1.812t.76 1.812q.761.75 1.802.75Zm0-1.333q-.5 0-.864-.364-.365-.365-.365-.865t.365-.865q.364-.364.864-.364t.865.364q.365.365.365.865t-.365.865q-.365.364-.865.364ZM10.021 10Zm-.854 6.583h1.666l.25-2.187q.605-.167 1.136-.49.531-.323 1.031-.802l2.021.875.854-1.375-1.792-1.354q.105-.333.136-.635.031-.303.031-.615 0-.292-.031-.573-.031-.281-.115-.635l1.792-1.396-.834-1.375-2.062.875q-.438-.438-1.021-.781-.583-.344-1.125-.49l-.271-2.208H9.167l-.271 2.208q-.584.146-1.125.458-.542.313-1.042.792l-2.021-.854-.833 1.375 1.75 1.354q-.083.333-.125.646-.042.312-.042.604t.042.594q.042.302.125.635l-1.75 1.375.833 1.375 2.021-.854q.479.458 1.021.771.542.312 1.146.479Z"/></svg>';
@@ -270,7 +268,7 @@ export class VerdocsTemplateRoles {
270
268
  console.log('Rendering sequences', sequences, roleNames);
271
269
  // style={{backgroundColor: getRGBA(getRoleIndex(this.template, role.name))}}
272
270
  return (h(Host, { class: { dragging: this.dragging } }, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "roles" }, sequences.map(sequence => (h("div", { class: "sequence" }, h("div", { class: "sequence-label no-drag" }, sequence, "."), h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequence}`, "data-sequence": sequence }, this.getRolesAtSequence(sequence).map(role => {
273
- const unknown = !role.email;
271
+ const unknown = !role.email || !role.first_name || !role.last_name;
274
272
  return unknown ? (h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("div", { class: "role-name" }, role.name), h("div", { class: "icons" }, h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover })))) : (h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("div", { class: "role-name" }, formatFullName(role)), h("div", { class: "icons" }, h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }))));
275
273
  })), h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) })))), h("div", { class: "sequence add-sequence" }, h("div", { class: "sequence-label no-drag" }, sequences.length + 1, "."), h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequences.length + 1}`, "data-sequence": sequences.length + 1 }), h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequences.length + 1) }))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-menu-panel", { onClose: () => (this.showingRoleDialog = null) }, h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
276
274
  var _a;
@@ -1,5 +1,5 @@
1
1
  import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-324ed895.js';
2
- import { VerdocsEndpoint, getTemplate, getOrganizationContacts, isValidEmail, createEnvelope, getRGBA, formatFullName } from '@verdocs/js-sdk';
2
+ import { VerdocsEndpoint, getTemplate, getOrganizationContacts, isValidEmail, createEnvelope, formatFullName, getRGBA } from '@verdocs/js-sdk';
3
3
  import { V as VerdocsToast } from './p-04c07b7b.js';
4
4
  import { S as SDKError } from './p-fd97809c.js';
5
5
  import { S as Store } from './p-58d027d1.js';
@@ -54,6 +54,7 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
54
54
  this.template = template;
55
55
  this.loading = false;
56
56
  this.rolesCompleted = {};
57
+ this.recomputeRolesCompleted();
57
58
  });
58
59
  }
59
60
  unlistenToTemplate() {
@@ -141,8 +142,8 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
141
142
  ...role,
142
143
  id: `r-${level}-${index}`,
143
144
  role_name: role.name,
144
- first_name: '',
145
- last_name: '',
145
+ first_name: role.first_name,
146
+ last_name: role.last_name,
146
147
  }));
147
148
  return rolesAtLevel;
148
149
  }
@@ -220,17 +221,23 @@ const VerdocsSend = /*@__PURE__*/ proxyCustomElement(class VerdocsSend extends H
220
221
  return (h(Host, { style: { display: 'flex' } }, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
221
222
  }
222
223
  const levels = this.getLevels();
223
- const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email));
224
+ const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);
224
225
  // TODO: Reactivate once SMS is re-enabled
225
226
  // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
226
227
  const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
227
228
  return (h(Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
228
- var _a, _b, _c, _d;
229
- const unknown = !role.email;
229
+ var _a, _b, _c;
230
+ const unknown = !role.email || !role.first_name || !role.last_name;
231
+ const roleName = ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : formatFullName(role);
230
232
  const elId = `verdocs-send-recipient-${role.role_name}`;
231
233
  const roleIndex = getRoleIndex(this.template, role.role_name);
232
234
  const rgba = getRGBA(roleIndex);
233
- return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: { backgroundColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
235
+ const completed = rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
236
+ const style = {
237
+ backgroundColor: rgba,
238
+ border: completed ? '2px solid #55bc81' : '2px solid #dddddd',
239
+ };
240
+ return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
234
241
  })))), h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
235
242
  }
236
243
  static get watchers() { return {
@@ -2947,7 +2947,7 @@ const VerdocsTemplateRoles = /*@__PURE__*/ proxyCustomElement(class VerdocsTempl
2947
2947
  console.log('Rendering sequences', sequences, roleNames);
2948
2948
  // style={{backgroundColor: getRGBA(getRoleIndex(this.template, role.name))}}
2949
2949
  return (h(Host, { class: { dragging: this.dragging } }, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "roles" }, sequences.map(sequence => (h("div", { class: "sequence" }, h("div", { class: "sequence-label no-drag" }, sequence, "."), h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequence}`, "data-sequence": sequence }, this.getRolesAtSequence(sequence).map(role => {
2950
- const unknown = !role.email;
2950
+ const unknown = !role.email || !role.first_name || !role.last_name;
2951
2951
  return unknown ? (h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("div", { class: "role-name" }, role.name), h("div", { class: "icons" }, h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover })))) : (h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("div", { class: "role-name" }, formatFullName(role)), h("div", { class: "icons" }, h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }))));
2952
2952
  })), h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) })))), h("div", { class: "sequence add-sequence" }, h("div", { class: "sequence-label no-drag" }, sequences.length + 1, "."), h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequences.length + 1}`, "data-sequence": sequences.length + 1 }), h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequences.length + 1) }))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-menu-panel", { onClose: () => (this.showingRoleDialog = null) }, h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
2953
2953
  var _a;
@@ -27,7 +27,7 @@ import { d as defineCustomElement$k } from './p-6719b0d7.js';
27
27
  import { d as defineCustomElement$j } from './p-0ed0ac8b.js';
28
28
  import { d as defineCustomElement$i } from './p-a2f6d2c6.js';
29
29
  import { d as defineCustomElement$h } from './p-62743fd3.js';
30
- import { d as defineCustomElement$g } from './p-0689fc47.js';
30
+ import { d as defineCustomElement$g } from './p-022b87d3.js';
31
31
  import { d as defineCustomElement$f } from './p-cce871bf.js';
32
32
  import { d as defineCustomElement$e } from './p-9cfd8022.js';
33
33
  import { d as defineCustomElement$d } from './p-4dd750e9.js';
@@ -37,7 +37,7 @@ import { d as defineCustomElement$a } from './p-c76fab71.js';
37
37
  import { d as defineCustomElement$9 } from './p-7cd6c0ce.js';
38
38
  import { d as defineCustomElement$8 } from './p-a55f08ad.js';
39
39
  import { d as defineCustomElement$7 } from './p-314d698d.js';
40
- import { d as defineCustomElement$6 } from './p-a60453aa.js';
40
+ import { d as defineCustomElement$6 } from './p-56e4effa.js';
41
41
  import { d as defineCustomElement$5 } from './p-325b3828.js';
42
42
  import { d as defineCustomElement$4 } from './p-c00770e6.js';
43
43
  import { d as defineCustomElement$3 } from './p-4d3b9ee9.js';
@@ -1,4 +1,4 @@
1
- import { V as VerdocsSend$1, d as defineCustomElement$1 } from './p-0689fc47.js';
1
+ import { V as VerdocsSend$1, d as defineCustomElement$1 } from './p-022b87d3.js';
2
2
 
3
3
  const VerdocsSend = VerdocsSend$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -224,7 +224,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
224
224
  }
225
225
  }
226
226
  updateRecipientFieldValue(fieldName, updateResult) {
227
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
227
+ console.log('[SIGN] updateRecipientFieldValue', fieldName, updateResult);
228
228
  this.getRecipientFields().forEach(oldField => {
229
229
  if (oldField.name === fieldName) {
230
230
  oldField.value = updateResult.value;
@@ -236,7 +236,7 @@ const VerdocsSign$1 = /*@__PURE__*/ proxyCustomElement(class VerdocsSign extends
236
236
  });
237
237
  }
238
238
  saveFieldChange(fieldName, fields) {
239
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
239
+ console.log('[SIGN] saveFieldChange', fieldName, fields);
240
240
  updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
241
241
  .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
242
242
  .catch(e => {
@@ -1,4 +1,4 @@
1
- import { V as VerdocsTemplateRoles$1, d as defineCustomElement$1 } from './p-a60453aa.js';
1
+ import { V as VerdocsTemplateRoles$1, d as defineCustomElement$1 } from './p-56e4effa.js';
2
2
 
3
3
  const VerdocsTemplateRoles = VerdocsTemplateRoles$1;
4
4
  const defineCustomElement = defineCustomElement$1;
@@ -1,5 +1,5 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host, F as Fragment, g as getElement } from './index-272d51a4.js';
2
- import { VerdocsEndpoint, getTemplate, integerSequence, getOrganizationContacts, isValidEmail, createEnvelope, getRGBA, formatFullName, createTemplateDocument, deleteTemplateDocument, updateField, createField, updateTemplateRole, createTemplateRole } from '@verdocs/js-sdk';
2
+ import { VerdocsEndpoint, getTemplate, integerSequence, getOrganizationContacts, isValidEmail, createEnvelope, formatFullName, getRGBA, createTemplateDocument, deleteTemplateDocument, updateField, createField, updateTemplateRole, createTemplateRole } from '@verdocs/js-sdk';
3
3
  import { S as SDKError } from './errors-887f1e88.js';
4
4
  import { S as Store } from './Datastore-b55570ff.js';
5
5
  import { V as VerdocsToast } from './Toast-c4843828.js';
@@ -131,6 +131,7 @@ const VerdocsSend = class {
131
131
  this.template = template;
132
132
  this.loading = false;
133
133
  this.rolesCompleted = {};
134
+ this.recomputeRolesCompleted();
134
135
  });
135
136
  }
136
137
  unlistenToTemplate() {
@@ -218,8 +219,8 @@ const VerdocsSend = class {
218
219
  ...role,
219
220
  id: `r-${level}-${index}`,
220
221
  role_name: role.name,
221
- first_name: '',
222
- last_name: '',
222
+ first_name: role.first_name,
223
+ last_name: role.last_name,
223
224
  }));
224
225
  return rolesAtLevel;
225
226
  }
@@ -297,17 +298,23 @@ const VerdocsSend = class {
297
298
  return (h(Host, { style: { display: 'flex' } }, h("verdocs-component-error", { message: "You must be authenticated to use this module." })));
298
299
  }
299
300
  const levels = this.getLevels();
300
- const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email));
301
+ const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) && recipient.first_name && recipient.last_name);
301
302
  // TODO: Reactivate once SMS is re-enabled
302
303
  // const rolesAssigned = Object.values(this.rolesCompleted).filter(recipient => isValidEmail(recipient.email) || isValidPhone(recipient.phone));
303
304
  const allRolesAssigned = rolesAssigned.length >= getRoleNames(this.template).length;
304
305
  return (h(Host, { class: { sendable: (_a = this.template) === null || _a === void 0 ? void 0 : _a.is_sendable } }, h("div", { class: "recipients" }, h("div", { class: "left-line" }), h("div", { class: `level level-start` }, this.getLevelIcon(-1), h("div", { class: "complete" }, "Send Envelope")), levels.map(level => (h("div", { class: `level level-${level}` }, this.getLevelIcon(level), this.getRolesAtLevel(level).map(role => {
305
- var _a, _b, _c, _d;
306
- const unknown = !role.email;
306
+ var _a, _b, _c;
307
+ const unknown = !role.email || !role.first_name || !role.last_name;
308
+ const roleName = ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : unknown ? role.role_name : formatFullName(role);
307
309
  const elId = `verdocs-send-recipient-${role.role_name}`;
308
310
  const roleIndex = getRoleIndex(this.template, role.role_name);
309
311
  const rgba = getRGBA(roleIndex);
310
- return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: { backgroundColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_a = this.rolesCompleted[role.id]) === null || _a === void 0 ? void 0 : _a.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", style: { borderColor: rgba }, onClick: e => this.handleClickRole(e, role), id: elId }, ((_c = this.rolesCompleted[role.id]) === null || _c === void 0 ? void 0 : _c.first_name) ? formatFullName(this.rolesCompleted[role.id]) : role.role_name, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_d = this.rolesCompleted[role.id]) !== null && _d !== void 0 ? _d : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
312
+ const completed = rolesAssigned.findIndex(r => r.role_name === role.role_name) > -1;
313
+ const style = {
314
+ backgroundColor: rgba,
315
+ border: completed ? '2px solid #55bc81' : '2px solid #dddddd',
316
+ };
317
+ return unknown ? (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: (_b = this.rolesCompleted[role.id]) !== null && _b !== void 0 ? _b : role, onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } }))))) : (h("div", { class: "recipient", "data-ri": roleIndex, "data-rn": role.role_name, style: style, onClick: e => this.handleClickRole(e, role), id: elId }, roleName, h("div", { class: "icon", innerHTML: editIcon }), this.showPickerForId === role.id && (h("verdocs-portal", { anchor: elId, onClickAway: () => (this.showPickerForId = '') }, h("verdocs-contact-picker", { onExit: () => (this.showPickerForId = ''), onNext: e => this.handleSelectContact(e, role), contactSuggestions: this.sessionContacts, templateRole: ((_c = this.rolesCompleted[role.id]) !== null && _c !== void 0 ? _c : role), onSearchContacts: e => { var _a; return (_a = this.searchContacts) === null || _a === void 0 ? void 0 : _a.emit(e.detail); } })))));
311
318
  })))), h("div", { class: `level level-done` }, this.getLevelIcon(levels.length), h("div", { class: "complete" }, "Signing Complete"))), h("div", { class: "buttons" }, h("verdocs-button", { label: "Cancel", size: "small", variant: "outline", onClick: e => this.handleCancel(e), disabled: this.sending }), h("verdocs-button", { label: "Send", size: "small", disabled: !allRolesAssigned || this.sending, onClick: e => this.handleSend(e) }), this.sending && h("verdocs-spinner", null))));
312
319
  }
313
320
  static get watchers() { return {
@@ -3844,7 +3851,7 @@ const VerdocsTemplateRoles = class {
3844
3851
  console.log('Rendering sequences', sequences, roleNames);
3845
3852
  // style={{backgroundColor: getRGBA(getRoleIndex(this.template, role.name))}}
3846
3853
  return (h(Host, { class: { dragging: this.dragging } }, h("form", { onSubmit: e => e.preventDefault(), onClick: e => e.stopPropagation(), autocomplete: "off" }, h("h5", null, "Roles and Workflow"), h("div", { class: "roles" }, sequences.map(sequence => (h("div", { class: "sequence" }, h("div", { class: "sequence-label no-drag" }, sequence, "."), h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequence}`, "data-sequence": sequence }, this.getRolesAtSequence(sequence).map(role => {
3847
- const unknown = !role.email;
3854
+ const unknown = !role.email || !role.first_name || !role.last_name;
3848
3855
  return unknown ? (h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("div", { class: "role-name" }, role.name), h("div", { class: "icons" }, h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover })))) : (h("div", { class: "role", "data-rolename": role.name, "data-sequence": sequence, "data-order": role.order }, h("div", { class: "role-name" }, formatFullName(role)), h("div", { class: "icons" }, h("div", { class: "gear-button", innerHTML: settingsIcon, onClick: () => (this.showingRoleDialog = role.name), "aria-role": "button" }), h("span", { class: "type-icon", innerHTML: role.type === 'signer' ? iconSigner : role.type === 'cc' ? iconCC : iconApprover }))));
3849
3856
  })), h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequence) })))), h("div", { class: "sequence add-sequence" }, h("div", { class: "sequence-label no-drag" }, sequences.length + 1, "."), h("div", { class: "sequence-roles", id: `verdocs-roles-sequence-${sequences.length + 1}`, "data-sequence": sequences.length + 1 }), h("button", { class: "add-role no-drag", innerHTML: plusIcon, onClick: e => this.handleAddRole(e, sequences.length + 1) }))), roleNames.length < 1 && (h("div", { class: "empty" }, "You must add at least one Role before proceeding.", h("br", null), " Click the ", h("span", { innerHTML: plusIcon }), " Add button above to get started.")), h("div", { class: "buttons" }, h("div", { class: "flex-fill" }), h("verdocs-button", { variant: "outline", label: "Cancel", size: "small", onClick: () => this.handleCancel() }), h("verdocs-button", { label: "OK", size: "small", onClick: () => this.handleSubmit(), disabled: roleNames.length < 1 }))), this.showingRoleDialog && (h("verdocs-menu-panel", { onClose: () => (this.showingRoleDialog = null) }, h("verdocs-template-role-properties", { endpoint: this.endpoint, templateId: this.templateId, roleName: this.showingRoleDialog, onClose: () => {
3850
3857
  var _a;
@@ -216,7 +216,7 @@ const VerdocsSign = class {
216
216
  }
217
217
  }
218
218
  updateRecipientFieldValue(fieldName, updateResult) {
219
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
219
+ console.log('[SIGN] updateRecipientFieldValue', fieldName, updateResult);
220
220
  this.getRecipientFields().forEach(oldField => {
221
221
  if (oldField.name === fieldName) {
222
222
  oldField.value = updateResult.value;
@@ -228,7 +228,7 @@ const VerdocsSign = class {
228
228
  });
229
229
  }
230
230
  saveFieldChange(fieldName, fields) {
231
- console.log('[SIGN] updateRecipientFieldValue', fieldName);
231
+ console.log('[SIGN] saveFieldChange', fieldName, fields);
232
232
  updateEnvelopeField(this.endpoint, this.envelopeId, fieldName, fields) //
233
233
  .then(updateResult => this.updateRecipientFieldValue(fieldName, updateResult))
234
234
  .catch(e => {