@verdocs/web-sdk 2.1.2 → 2.2.0

package/dist/collection/components/settings/verdocs-settings-organization/TimeZones.js

@@ -0,0 +1,144 @@
+export const TimeZones = [
+  ['International Date Line West', 'GMT-11:00', '(GMT-11:00) International Date Line West'],
+  ['Midway Island', 'GMT-11:00', '(GMT-11:00) Midway Island'],
+  ['Samoa', 'GMT-11:00', '(GMT-11:00) Samoa'],
+  ['Hawaii', 'GMT-10:00', '(GMT-10:00) Hawaii'],
+  ['Alaska', 'GMT-09:00', '(GMT-09:00) Alaska'],
+  ['Pacific Time (US & Canada)', 'GMT-08:00', '(GMT-08:00) Pacific Time (US & Canada)'],
+  ['Tijuana', 'GMT-08:00', '(GMT-08:00) Tijuana'],
+  ['Arizona', 'GMT-07:00', '(GMT-07:00) Arizona'],
+  ['Chihuahua', 'GMT-07:00', '(GMT-07:00) Chihuahua'],
+  ['Mazatlan', 'GMT-07:00', '(GMT-07:00) Mazatlan'],
+  ['Mountain Time (US & Canada)', 'GMT-07:00', '(GMT-07:00) Mountain Time (US & Canada)'],
+  ['Central America', 'GMT-06:00', '(GMT-06:00) Central America'],
+  ['Central Time (US & Canada)', 'GMT-06:00', '(GMT-06:00) Central Time (US & Canada)'],
+  ['Guadalajara', 'GMT-06:00', '(GMT-06:00) Guadalajara'],
+  ['Mexico City', 'GMT-06:00', '(GMT-06:00) Mexico City'],
+  ['Monterrey', 'GMT-06:00', '(GMT-06:00) Monterrey'],
+  ['Saskatchewan', 'GMT-06:00', '(GMT-06:00) Saskatchewan'],
+  ['Bogota', 'GMT-05:00', '(GMT-05:00) Bogota'],
+  ['Eastern Time (US & Canada)', 'GMT-05:00', '(GMT-05:00) Eastern Time (US & Canada)'],
+  ['Indiana (East)', 'GMT-05:00', '(GMT-05:00) Indiana (East)'],
+  ['Lima', 'GMT-05:00', '(GMT-05:00) Lima'],
+  ['Quito', 'GMT-05:00', '(GMT-05:00) Quito'],
+  ['Caracas', 'GMT-04:30', '(GMT-04:30) Caracas'],
+  ['Atlantic Time (Canada)', 'GMT-04:00', '(GMT-04:00) Atlantic Time (Canada)'],
+  ['Georgetown', 'GMT-04:00', '(GMT-04:00) Georgetown'],
+  ['La Paz', 'GMT-04:00', '(GMT-04:00) La Paz'],
+  ['Santiago', 'GMT-04:00', '(GMT-04:00) Santiago'],
+  ['Newfoundland', 'GMT-03:30', '(GMT-03:30) Newfoundland'],
+  ['Brasilia', 'GMT-03:00', '(GMT-03:00) Brasilia'],
+  ['Buenos Aires', 'GMT-03:00', '(GMT-03:00) Buenos Aires'],
+  ['Greenland', 'GMT-03:00', '(GMT-03:00) Greenland'],
+  ['Mid-Atlantic', 'GMT-02:00', '(GMT-02:00) Mid-Atlantic'],
+  ['Azores', 'GMT-01:00', '(GMT-01:00) Azores'],
+  ['Cape Verde Is.', 'GMT-01:00', '(GMT-01:00) Cape Verde Is.'],
+  ['Casablanca', 'GMT+00:00', '(GMT+00:00) Casablanca'],
+  ['Dublin', 'GMT+00:00', '(GMT+00:00) Dublin'],
+  ['Edinburgh', 'GMT+00:00', '(GMT+00:00) Edinburgh'],
+  ['Lisbon', 'GMT+00:00', '(GMT+00:00) Lisbon'],
+  ['London', 'GMT+00:00', '(GMT+00:00) London'],
+  ['Monrovia', 'GMT+00:00', '(GMT+00:00) Monrovia'],
+  ['UTC', 'GMT+00:00', '(GMT+00:00) UTC'],
+  ['Amsterdam', 'GMT+01:00', '(GMT+01:00) Amsterdam'],
+  ['Belgrade', 'GMT+01:00', '(GMT+01:00) Belgrade'],
+  ['Berlin', 'GMT+01:00', '(GMT+01:00) Berlin'],
+  ['Bern', 'GMT+01:00', '(GMT+01:00) Bern'],
+  ['Bratislava', 'GMT+01:00', '(GMT+01:00) Bratislava'],
+  ['Brussels', 'GMT+01:00', '(GMT+01:00) Brussels'],
+  ['Budapest', 'GMT+01:00', '(GMT+01:00) Budapest'],
+  ['Copenhagen', 'GMT+01:00', '(GMT+01:00) Copenhagen'],
+  ['Ljubljana', 'GMT+01:00', '(GMT+01:00) Ljubljana'],
+  ['Madrid', 'GMT+01:00', '(GMT+01:00) Madrid'],
+  ['Paris', 'GMT+01:00', '(GMT+01:00) Paris'],
+  ['Prague', 'GMT+01:00', '(GMT+01:00) Prague'],
+  ['Rome', 'GMT+01:00', '(GMT+01:00) Rome'],
+  ['Sarajevo', 'GMT+01:00', '(GMT+01:00) Sarajevo'],
+  ['Skopje', 'GMT+01:00', '(GMT+01:00) Skopje'],
+  ['Stockholm', 'GMT+01:00', '(GMT+01:00) Stockholm'],
+  ['Vienna', 'GMT+01:00', '(GMT+01:00) Vienna'],
+  ['Warsaw', 'GMT+01:00', '(GMT+01:00) Warsaw'],
+  ['West Central Africa', '(GMT+01:00', '(GMT+01:00) West Central Africa'],
+  ['Zagreb', 'GMT+01:00', '(GMT+01:00) Zagreb'],
+  ['Athens', 'GMT+02:00', '(GMT+02:00) Athens'],
+  ['Bucharest', 'GMT+02:00', '(GMT+02:00) Bucharest'],
+  ['Cairo', 'GMT+02:00', '(GMT+02:00) Cairo'],
+  ['Harare', 'GMT+02:00', '(GMT+02:00) Harare'],
+  ['Helsinki', 'GMT+02:00', '(GMT+02:00) Helsinki'],
+  ['Istanbul', 'GMT+02:00', '(GMT+02:00) Istanbul'],
+  ['Jerusalem', 'GMT+02:00', '(GMT+02:00) Jerusalem'],
+  ['Kyiv', 'GMT+02:00', '(GMT+02:00) Kyiv'],
+  ['Minsk', 'GMT+02:00', '(GMT+02:00) Minsk'],
+  ['Pretoria', 'GMT+02:00', '(GMT+02:00) Pretoria'],
+  ['Riga', 'GMT+02:00', '(GMT+02:00) Riga'],
+  ['Sofia', 'GMT+02:00', '(GMT+02:00) Sofia'],
+  ['Tallinn', 'GMT+02:00', '(GMT+02:00) Tallinn'],
+  ['Vilnius', 'GMT+02:00', '(GMT+02:00) Vilnius'],
+  ['Baghdad', 'GMT+03:00', '(GMT+03:00) Baghdad'],
+  ['Kuwait', 'GMT+03:00', '(GMT+03:00) Kuwait'],
+  ['Moscow', 'GMT+03:00', '(GMT+03:00) Moscow'],
+  ['Nairobi', 'GMT+03:00', '(GMT+03:00) Nairobi'],
+  ['Riyadh', 'GMT+03:00', '(GMT+03:00) Riyadh'],
+  ['St. Petersburg', 'GMT+03:00', '(GMT+03:00) St. Petersburg'],
+  ['Volgograd', 'GMT+03:00', '(GMT+03:00) Volgograd'],
+  ['Tehran', 'GMT+03:30', '(GMT+03:30) Tehran'],
+  ['Abu Dhabi', 'GMT+04:00', '(GMT+04:00) Abu Dhabi'],
+  ['Baku', 'GMT+04:00', '(GMT+04:00) Baku'],
+  ['Muscat', 'GMT+04:00', '(GMT+04:00) Muscat'],
+  ['Tbilisi', 'GMT+04:00', '(GMT+04:00) Tbilisi'],
+  ['Yerevan', 'GMT+04:00', '(GMT+04:00) Yerevan'],
+  ['Kabul', 'GMT+04:30', '(GMT+04:30) Kabul'],
+  ['Ekaterinburg', 'GMT+05:00', '(GMT+05:00) Ekaterinburg'],
+  ['Islamabad', 'GMT+05:00', '(GMT+05:00) Islamabad'],
+  ['Karachi', 'GMT+05:00', '(GMT+05:00) Karachi'],
+  ['Tashkent', 'GMT+05:00', '(GMT+05:00) Tashkent'],
+  ['Chennai', 'GMT+05:30', '(GMT+05:30) Chennai'],
+  ['Kolkata', 'GMT+05:30', '(GMT+05:30) Kolkata'],
+  ['Mumbai', 'GMT+05:30', '(GMT+05:30) Mumbai'],
+  ['New Delhi', 'GMT+05:30', '(GMT+05:30) New Delhi'],
+  ['Sri Jayawardenepura', 'GMT+05:30', '(GMT+05:30) Sri Jayawardenepura'],
+  ['Kathmandu', 'GMT+05:45', '(GMT+05:45) Kathmandu'],
+  ['Almaty', 'GMT+06:00', '(GMT+06:00) Almaty'],
+  ['Astana', 'GMT+06:00', '(GMT+06:00) Astana'],
+  ['Dhaka', 'GMT+06:00', '(GMT+06:00) Dhaka'],
+  ['Novosibirsk', 'GMT+06:00', '(GMT+06:00) Novosibirsk'],
+  ['Rangoon', 'GMT+06:30', '(GMT+06:30) Rangoon'],
+  ['Bangkok', 'GMT+07:00', '(GMT+07:00) Bangkok'],
+  ['Hanoi', 'GMT+07:00', '(GMT+07:00) Hanoi'],
+  ['Jakarta', 'GMT+07:00', '(GMT+07:00) Jakarta'],
+  ['Krasnoyarsk', 'GMT+07:00', '(GMT+07:00) Krasnoyarsk'],
+  ['Beijing', 'GMT+08:00', '(GMT+08:00) Beijing'],
+  ['Chongqing', 'GMT+08:00', '(GMT+08:00) Chongqing'],
+  ['Hong Kong', 'GMT+08:00', '(GMT+08:00) Hong Kong'],
+  ['Irkutsk', 'GMT+08:00', '(GMT+08:00) Irkutsk'],
+  ['Kuala Lumpur', 'GMT+08:00', '(GMT+08:00) Kuala Lumpur'],
+  ['Perth', 'GMT+08:00', '(GMT+08:00) Perth'],
+  ['Singapore', 'GMT+08:00', '(GMT+08:00) Singapore'],
+  ['Taipei', 'GMT+08:00', '(GMT+08:00) Taipei'],
+  ['Ulaan Bataar', 'GMT+08:00', '(GMT+08:00) Ulaan Bataar'],
+  ['Urumqi', 'GMT+08:00', '(GMT+08:00) Urumqi'],
+  ['Osaka', 'GMT+09:00', '(GMT+09:00) Osaka'],
+  ['Sapporo', 'GMT+09:00', '(GMT+09:00) Sapporo'],
+  ['Seoul', 'GMT+09:00', '(GMT+09:00) Seoul'],
+  ['Tokyo', 'GMT+09:00', '(GMT+09:00) Tokyo'],
+  ['Yakutsk', 'GMT+09:00', '(GMT+09:00) Yakutsk'],
+  ['Adelaide', 'GMT+09:30', '(GMT+09:30) Adelaide'],
+  ['Darwin', 'GMT+09:30', '(GMT+09:30) Darwin'],
+  ['Brisbane', 'GMT+10:00', '(GMT+10:00) Brisbane'],
+  ['Canberra', 'GMT+10:00', '(GMT+10:00) Canberra'],
+  ['Guam', 'GMT+10:00', '(GMT+10:00) Guam'],
+  ['Hobart', 'GMT+10:00', '(GMT+10:00) Hobart'],
+  ['Melbourne', 'GMT+10:00', '(GMT+10:00) Melbourne'],
+  ['Port Moresby', 'GMT+10:00', '(GMT+10:00) Port Moresby'],
+  ['Sydney', 'GMT+10:00', '(GMT+10:00) Sydney'],
+  ['Vladivostok', 'GMT+10:00', '(GMT+10:00) Vladivostok'],
+  ['Kamchatka', 'GMT+11:00', '(GMT+11:00) Kamchatka'],
+  ['Magadan', 'GMT+11:00', '(GMT+11:00) Magadan'],
+  ['New Caledonia', 'GMT+11:00', '(GMT+11:00) New Caledonia'],
+  ['Solomon Is.', 'GMT+11:00', '(GMT+11:00) Solomon Is.'],
+  ['Auckland', 'GMT+12:00', '(GMT+12:00) Auckland'],
+  ['Fiji', 'GMT+12:00', '(GMT+12:00) Fiji'],
+  ['Marshall Is.', 'GMT+12:00', '(GMT+12:00) Marshall Is.'],
+  ['Wellington', 'GMT+12:00', '(GMT+12:00) Wellington'],
+  ["Nuku'alofa", 'GMT+13:00', "(GMT+13:00) Nuku'alofa"],
+];

package/dist/collection/components/settings/verdocs-settings-organization/verdocs-settings-organization.css

@@ -0,0 +1,33 @@
+verdocs-settings-organization {
+  display: flex;
+  padding: 10px;
+  font-size: 18px;
+  flex-wrap: nowrap;
+  border-radius: 6px;
+  color: #33364b;
+  flex-direction: column;
+  font-family: "Inter", "Barlow", sans-serif;
+}
+verdocs-settings-organization .columns {
+  gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+verdocs-settings-organization .column {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+verdocs-settings-organization verdocs-text-input {
+  margin: 10px 0;
+}
+verdocs-settings-organization verdocs-text-input input {
+  height: 32px;
+}
+@media screen and (max-width: 600px) {
+  verdocs-settings-organization .columns {
+    gap: 0;
+    flex-direction: column;
+  }
+}

package/dist/collection/components/settings/verdocs-settings-organization/verdocs-settings-organization.js

@@ -0,0 +1,226 @@
+import { z } from 'zod';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { Organizations } from '@verdocs/js-sdk/Organizations';
+import { h, Host } from '@stencil/core';
+import { convertToE164 } from '../../../utils/utils';
+import { VerdocsToast } from '../../../utils/Toast';
+import { TimeZones } from './TimeZones';
+const timeZoneOptions = TimeZones.map(tz => ({ value: tz[2], label: tz[2] }));
+const schema = z.object({
+  name: z.string().trim().min(1, 'Name is required').max(30),
+  business_name: z.string().trim().max(30).optional(),
+  contact_email: z.string().trim().email('Invalid email').optional().or(z.literal('')),
+  phone: z.preprocess(val => convertToE164(String(val).trim()), z.string().optional()),
+  address: z.string().trim().max(30).optional(),
+  address2: z.string().trim().max(30).optional(),
+  timezone: z.string().trim().optional(),
+  url: z.string().trim().optional(),
+});
+/**
+ * Displays a settings form that allows the user to manage their Verdocs profile.
+ */
+export class VerdocsSettingsOrganization {
+  constructor() {
+    this.endpoint = VerdocsEndpoint.getDefault();
+    this.valid = false;
+    this.dirty = false;
+    this.submitting = false;
+    this.name = '';
+    this.business_name = '';
+    this.contact_email = '';
+    this.phone = '';
+    this.address = '';
+    this.address2 = '';
+    this.timezone = '';
+    this.url = '';
+  }
+  componentWillLoad() {
+    this.endpoint.loadSession();
+    if (!this.endpoint.session) {
+      console.log('[SETTINGS] Must be authenticated');
+      return;
+    }
+  }
+  async componentDidLoad() {
+    const organization = await Organizations.getOrganization(this.endpoint, this.endpoint.session.organization_id);
+    console.log('[SETTINGS] Loaded organization', organization);
+    this.resetForm(organization);
+  }
+  resetForm(organization) {
+    this.name = organization.name;
+    this.business_name = organization.business_name;
+    this.contact_email = organization.contact_email;
+    this.phone = organization.phone;
+    this.address = organization.address;
+    this.address2 = organization.address2;
+    this.timezone = organization.timezone;
+    this.url = organization.url;
+    this.dirty = false;
+    this.valid = true;
+  }
+  handleSubmit(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    Organizations.updateOrganization(VerdocsEndpoint.getDefault(), this.endpoint.session.organization_id, {
+      name: this.name,
+      business_name: this.business_name,
+      contact_email: this.contact_email,
+      phone: this.phone,
+      address: this.address,
+      address2: this.address2,
+      timezone: this.timezone,
+      url: this.url,
+    })
+      .then(newOrganization => {
+      var _a;
+      console.log('[SETTINGS] Update result', newOrganization);
+      (_a = this.organizationUpdated) === null || _a === void 0 ? void 0 : _a.emit({ endpoint: this.endpoint, organization: newOrganization });
+      this.resetForm(newOrganization);
+    })
+      .catch(e => VerdocsToast(`Error updating organization: ${e.message}`, { style: 'error' }));
+  }
+  processFields() {
+    const validation = schema.safeParse({
+      name: this.name,
+      business_name: this.business_name,
+      contact_email: this.contact_email,
+      phone: this.phone,
+      address: this.address,
+      address2: this.address2,
+      timezone: this.timezone,
+      url: this.url,
+    });
+    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, "Organization Profile"), h("form", { onSubmit: e => this.handleSubmit(e) }, h("div", { class: "columns" }, h("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-organization-name", value: this.name, autocomplete: "off", label: "Name", required: true, placeholder: "Enter your organization's name...", onInput: (e) => (this.name = e.target.value), onFocusout: (e) => {
+        this.name = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-business-name", value: this.business_name, autocomplete: "off", label: "d/b/a", placeholder: "Enter your d/b/a, if any...", onInput: (e) => (this.business_name = e.target.value), onFocusout: (e) => {
+        this.business_name = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-url", value: this.url, autocomplete: "off", label: "Web URL", placeholder: "Enter your Web URL...", onInput: (e) => (this.url = e.target.value), onFocusout: (e) => {
+        this.url = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-phone", value: this.phone, 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("div", { class: "column" }, h("verdocs-text-input", { id: "verdocs-organization-address", value: this.address, autocomplete: "off", label: "Address", required: true, placeholder: "Enter your address...", onInput: (e) => (this.address = e.target.value), onFocusout: (e) => {
+        this.address = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-address", value: this.address2, autocomplete: "off", label: "Address 2", required: true, placeholder: "Address line 2...", onInput: (e) => (this.address2 = e.target.value), onFocusout: (e) => {
+        this.address2 = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-address2", value: this.address2, clearable: true, autocomplete: "off", label: "Address 2", placeholder: "Enter your address...", onInput: (e) => (this.address2 = e.target.value), onFocusout: (e) => {
+        this.address2 = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-text-input", { id: "verdocs-organization-email", value: this.contact_email, clearable: true, autocomplete: "off", label: "Contact Email", placeholder: "Enter your contact email address...", onInput: (e) => (this.contact_email = e.target.value), onFocusout: (e) => {
+        this.contact_email = e.target.value.trim();
+        this.processFields();
+      } }), h("verdocs-select-input", { options: timeZoneOptions, value: this.timezone, label: "Time Zone" }))), h("verdocs-button", { type: "submit", label: "Save", size: "normal", disabled: this.submitting || !this.dirty }))));
+  }
+  static get is() { return "verdocs-settings-organization"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-settings-organization.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-settings-organization.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "valid": {},
+      "dirty": {},
+      "submitting": {},
+      "name": {},
+      "business_name": {},
+      "contact_email": {},
+      "phone": {},
+      "address": {},
+      "address2": {},
+      "timezone": {},
+      "url": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }, {
+        "method": "organizationUpdated",
+        "name": "organizationUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user chooses the Edit option from the dropdown menu."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; organization: IOrganization}",
+          "resolved": "{ endpoint: VerdocsEndpoint; organization: IOrganization; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IOrganization": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Organizations/Types"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/settings/verdocs-settings-organization/verdocs-settings-organization.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Settings/Organization',
+  component: 'verdocs-settings-organization',
+  args: {},
+  argTypes: {
+    onOrganizationUpdated: { action: 'organizationUpdated' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const Organization = ({ onOrganizationUpdated }) => html ` <verdocs-settings-organization @organizationUpdated=${onOrganizationUpdated} /> `;

package/dist/collection/components/settings/verdocs-settings-profile/verdocs-settings-profile.css

@@ -0,0 +1,33 @@
+verdocs-settings-profile {
+  display: flex;
+  padding: 10px;
+  font-size: 18px;
+  flex-wrap: nowrap;
+  border-radius: 6px;
+  color: #33364b;
+  flex-direction: column;
+  font-family: "Inter", "Barlow", sans-serif;
+}
+verdocs-settings-profile .columns {
+  gap: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+}
+verdocs-settings-profile .column {
+  flex: 1;
+  display: flex;
+  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;
+    flex-direction: column;
+  }
+}

package/dist/collection/components/settings/verdocs-settings-profile/verdocs-settings-profile.js

@@ -0,0 +1,187 @@
+import { z } from 'zod';
+import { Profiles } from '@verdocs/js-sdk/Users';
+import { VerdocsEndpoint } from '@verdocs/js-sdk';
+import { h, Host } from '@stencil/core';
+import { convertToE164 } from '../../../utils/utils';
+import { VerdocsToast } from '../../../utils/Toast';
+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()),
+});
+/**
+ * Displays a settings form that allows the user to manage their Verdocs profile.
+ */
+export class VerdocsSettingsProfile {
+  constructor() {
+    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 Profiles.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();
+    Profiles.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 is() { return "verdocs-settings-profile"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["verdocs-settings-profile.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["verdocs-settings-profile.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "endpoint": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "VerdocsEndpoint",
+          "resolved": "VerdocsEndpoint",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The endpoint to use to communicate with Verdocs. If not set, the default endpoint will be used."
+        },
+        "defaultValue": "VerdocsEndpoint.getDefault()"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "valid": {},
+      "dirty": {},
+      "submitting": {},
+      "first_name": {},
+      "last_name": {},
+      "email": {},
+      "phone": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sdkError",
+        "name": "sdkError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired if an error occurs. The event details will contain information about the error. Most errors will\nterminate the process, and the calling application should correct the condition and re-render the component."
+        },
+        "complexType": {
+          "original": "SDKError",
+          "resolved": "SDKError",
+          "references": {
+            "SDKError": {
+              "location": "import",
+              "path": "../../../utils/errors"
+            }
+          }
+        }
+      }, {
+        "method": "profileUpdated",
+        "name": "profileUpdated",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event fired when the user chooses the Edit option from the dropdown menu."
+        },
+        "complexType": {
+          "original": "{endpoint: VerdocsEndpoint; profile: IProfile}",
+          "resolved": "{ endpoint: VerdocsEndpoint; profile: IProfile; }",
+          "references": {
+            "VerdocsEndpoint": {
+              "location": "import",
+              "path": "@verdocs/js-sdk"
+            },
+            "IProfile": {
+              "location": "import",
+              "path": "@verdocs/js-sdk/Users/Types"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/settings/verdocs-settings-profile/verdocs-settings-profile.stories.js

@@ -0,0 +1,13 @@
+import { html } from 'lit-html';
+export default {
+  title: 'Settings/Profile',
+  component: 'verdocs-settings-profile',
+  args: {},
+  argTypes: {
+    onProfileUpdated: { action: 'profileUpdated' },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+export const Profile = ({ onProfileUpdated }) => html ` <verdocs-settings-profile @profileUpdated=${onProfileUpdated} /> `;

package/dist/components/EnvelopeStore.js

@@ -1,4 +1,4 @@
-import { c as createStore } from './index3.js';
+import { c as createStore } from './index4.js';
 import { j as getEnvelope } from './Envelopes.js';
 
 const createEnvelopeStore = (envelopeId) => {