@verdocs/web-sdk 2.1.4 → 2.2.0

package/dist/components/verdocs-settings-profile2.js

@@ -0,0 +1,142 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { z } from './index3.js';
+import { g as getCurrentProfile, u as updateProfile } from './Profiles.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import './Types.js';
+import { d as convertToE164 } from './utils.js';
+import { V as VerdocsToast } from './Toast.js';
+import { d as defineCustomElement$3 } from './verdocs-button2.js';
+import { d as defineCustomElement$2 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$1 } from './verdocs-text-input2.js';
+
+const verdocsSettingsProfileCss = "verdocs-settings-profile{display:-ms-flexbox;display:flex;padding:10px;font-size:18px;-ms-flex-wrap:nowrap;flex-wrap:nowrap;border-radius:6px;color:#33364b;-ms-flex-direction:column;flex-direction:column;font-family:\"Inter\", \"Barlow\", sans-serif}verdocs-settings-profile .columns{gap:20px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}verdocs-settings-profile .column{-ms-flex:1;flex:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}verdocs-settings-profile verdocs-text-input{margin:10px 0}verdocs-settings-profile verdocs-text-input input{height:32px}@media screen and (max-width: 600px){verdocs-settings-profile .columns{gap:0;-ms-flex-direction:column;flex-direction:column}}";
+
+const schema = z.object({
+  first_name: z.string().trim().min(1, 'First name is required').max(30),
+  last_name: z.string().trim().min(1, 'Last name is required').max(30),
+  email: z.string().trim().email('Invalid email').min(1, 'Email is required'),
+  phone: z.preprocess(val => convertToE164(String(val).trim()), z.string()),
+});
+const VerdocsSettingsProfile = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.profileUpdated = createEvent(this, "profileUpdated", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.valid = false;
+    this.dirty = false;
+    this.submitting = false;
+    this.first_name = '';
+    this.last_name = '';
+    this.email = '';
+    this.phone = '';
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return;
+    }
+  }
+  async componentDidLoad() {
+    const profile = await getCurrentProfile(this.endpoint);
+    console.log('[SETTINGS] Loaded profile', profile);
+    this.resetForm(profile);
+  }
+  resetForm(profile) {
+    this.first_name = profile.first_name;
+    this.last_name = profile.last_name;
+    this.email = profile.email;
+    this.phone = profile.phone;
+    this.dirty = false;
+    this.valid = true;
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    updateProfile(VerdocsEndpoint.getDefault(), this.endpoint.session.profile_id, {
+      first_name: this.first_name,
+      last_name: this.last_name,
+      phone: this.phone,
+    })
+      .then(newProfile => {
+      var _a;
+      console.log('[SETTINGS] Update result', newProfile);
+      (_a = this.profileUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, profile: newProfile });
+      this.resetForm(newProfile);
+    })
+      .catch(e => VerdocsToast(`Error updating profile: ${e.message}`, { style: 'error' }));
+  }
+  processFields() {
+    const validation = schema.safeParse({
+      first_name: this.first_name,
+      last_name: this.last_name,
+      email: this.email,
+      phone: this.phone,
+    });
+    console.log('[SETTINGS] Validation result', validation);
+    this.valid = validation.success;
+    this.dirty = true;
+  }
+  render() {
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return h(Host, { class: "authentication-required" }, "Must be authenticated");
+    }
+    return (h(Host, null, h("h1", null, "My Profile"), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", { class: "columns" }, h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-profile-first-name", value: this.first_name, autocomplete: "off", label: "First Name", required: true, placeholder: "Enter your first name...", onInput: (e) => (this.first_name = e.target.value), onFocusout: (e) => {
+        this.first_name = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-profile-last-name", value: this.last_name, autocomplete: "off", label: "Last Name", required: true, placeholder: "Enter your last name...", onInput: (e) => (this.last_name = e.target.value), onFocusout: (e) => {
+        this.last_name = e.target.value.trim();
+        this.processFields();
+      } })), h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-profile-email", value: this.email, autocomplete: "off", label: "Email Address", required: true, disabled: true, placeholder: "Enter your email address...", onInput: (e) => (this.email = e.target.value), onFocusout: (e) => {
+        this.email = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-profile-phone", value: this.phone, clearable: true, autocomplete: "off", label: "Phone Number", placeholder: "Enter your phone number...", onInput: (e) => (this.phone = e.target.value), onFocusout: (e) => {
+        this.phone = e.target.value.trim();
+        this.processFields();
+      } }))), h("verdocs-button", { type: "submit", label: "Save", size: "normal", disabled: this.submitting || !this.dirty }))));
+  }
+  static get style() { return verdocsSettingsProfileCss; }
+}, [0, "verdocs-settings-profile", {
+    "endpoint": [16],
+    "valid": [32],
+    "dirty": [32],
+    "submitting": [32],
+    "first_name": [32],
+    "last_name": [32],
+    "email": [32],
+    "phone": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-settings-profile", "verdocs-button", "verdocs-help-icon", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-settings-profile":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSettingsProfile);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { VerdocsSettingsProfile as V, defineCustomElement as d };

package/dist/components/verdocs-settings.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface VerdocsSettings extends Components.VerdocsSettings, HTMLElement {}
+export const VerdocsSettings: {
+  prototype: VerdocsSettings;
+  new (): VerdocsSettings;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/verdocs-settings.js

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import './Types.js';
+import { V as VerdocsEndpoint } from './VerdocsEndpoint.js';
+import { S as SDKError } from './errors.js';
+import { d as defineCustomElement$8 } from './verdocs-button2.js';
+import { d as defineCustomElement$7 } from './verdocs-help-icon2.js';
+import { d as defineCustomElement$6 } from './verdocs-loader2.js';
+import { d as defineCustomElement$5 } from './verdocs-select-input2.js';
+import { d as defineCustomElement$4 } from './verdocs-settings-organization2.js';
+import { d as defineCustomElement$3 } from './verdocs-settings-profile2.js';
+import { d as defineCustomElement$2 } from './verdocs-text-input2.js';
+
+const verdocsSettingsCss = "verdocs-settings{font-family:\"Inter\", -apple-system, \"Segoe UI\", \"Roboto\", \"Helvetica Neue\", sans-serif;display:-ms-flexbox;display:flex;padding:15px;row-gap:15px;min-height:200px;position:relative;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-direction:column;flex-direction:column}verdocs-settings .tabs{gap:4px;width:100%;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;border-bottom:1px solid #654dcb}verdocs-settings .tabs .tab{cursor:pointer;padding:5px 10px;color:#ffffff;background-color:#777777}verdocs-settings .tabs .tab.active{color:#ffffff;background-color:#654dcb}";
+
+const VerdocsSettings$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.sdkError = createEvent(this, "sdkError", 7);
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.tab = 'profile';
+  }
+  async componentWillLoad() {
+    var _a, _b, _c;
+    try {
+      this.endpoint.loadSession();
+      if (!this.endpoint.session) {
+        console.log('[SETTINGS] Unable to start session, must be authenticated');
+        return;
+      }
+    }
+    catch (e) {
+      console.log('[SETTINGS] Error with session', e);
+      (_a = this.sdkError) === null || _a === void 0 ? void 0 : _a.emit(new SDKError(e.message, (_b = e.response) === null || _b === void 0 ? void 0 : _b.status, (_c = e.response) === null || _c === void 0 ? void 0 : _c.data));
+    }
+  }
+  render() {
+    if (!this.endpoint.session) {
+      return (h(Host, null, h("verdocs-loader", null)));
+    }
+    return (h(Host, null, h("div", { class: "tabs" }, h("div", { class: `tab ${this.tab === 'profile' ? 'active' : ''}`, onClick: () => (this.tab = 'profile') }, "Profile"), h("div", { class: `tab ${this.tab === 'organization' ? 'active' : ''}`, onClick: () => (this.tab = 'organization') }, "Organization")), this.tab === 'profile' && h("verdocs-settings-profile", { endpoint: this.endpoint }), this.tab === 'organization' && h("verdocs-settings-organization", { endpoint: this.endpoint })));
+  }
+  static get style() { return verdocsSettingsCss; }
+}, [0, "verdocs-settings", {
+    "endpoint": [16],
+    "tab": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["verdocs-settings", "verdocs-button", "verdocs-help-icon", "verdocs-loader", "verdocs-select-input", "verdocs-settings-organization", "verdocs-settings-profile", "verdocs-text-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "verdocs-settings":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, VerdocsSettings$1);
+      }
+      break;
+    case "verdocs-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "verdocs-help-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "verdocs-loader":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "verdocs-select-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "verdocs-settings-organization":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "verdocs-settings-profile":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "verdocs-text-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const VerdocsSettings = VerdocsSettings$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { VerdocsSettings, defineCustomElement };