@nylas/web-elements 1.1.0-canary.5 → 1.1.0-canary.8

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js

@@ -17,10 +17,25 @@ import { debug } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 export class NylasCustomBookingFlow {
     constructor() {
+        this.selectedConfiguration = undefined;
         this.name = 'booking-type';
         this.bookingType = '';
         this.selectedBookingType = '';
     }
+    elementNameChangedHandler(newValue) {
+        debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);
+        this.host.setAttribute('name', newValue);
+    }
+    selectedConfigurationChangedHandler(newValue, oldValue) {
+        debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);
+        if (newValue?.event_booking?.booking_type) {
+            this.bookingType = newValue?.event_booking?.booking_type;
+        }
+        if (typeof this.internals.setFormValue === 'function') {
+            this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');
+        }
+        this.selectedBookingType = this.bookingType;
+    }
     connectedCallback() {
         debug('nylas-custom-booking-flow', 'connectedCallback');
     }
@@ -33,10 +48,6 @@ export class NylasCustomBookingFlow {
     }
     componentDidLoad() {
         debug('nylas-custom-booking-flow', 'componentDidLoad');
-        if (typeof this.internals.setFormValue === 'function') {
-            this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');
-        }
-        this.selectedBookingType = this.bookingType;
     }
     componentWillUpdate() {
         debug('nylas-custom-booking-flow', 'componentWillUpdate');
@@ -50,10 +61,6 @@ export class NylasCustomBookingFlow {
     componentDidRender() {
         debug('nylas-custom-booking-flow', 'componentDidRender');
     }
-    elementNameChangedHandler(newValue) {
-        debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);
-        this.host.setAttribute('name', newValue);
-    }
     selectedOptionChangedHandler(event) {
         debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);
         const valueChanged = (event) => {
@@ -74,7 +81,7 @@ export class NylasCustomBookingFlow {
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: 'a4f8162f7964925b34c256d88fa8cd3f0e684e7e' }, h("div", { key: '3b5c6077ad57d232f9c25c17b117b4ad31cf3cfa', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '4ecafa38be03812b2b6188d4858018d5cd94be8e', class: "header", part: "ncbf__header" }, h("h3", { key: 'd0eccafc6133ff24de9fbab11737e08862aad835' }, "Customize booking flow"), h("p", { key: '0e75183824a878b6df83f92467aba58072d2ac6f' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: '7f019073e242dce64522e27262298e480b0fb346' }, h("div", { key: '47bd77bcd4c4a1a9a845581bb6ad77b6dd7d65e7', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: '17386ac59d7680789dda85e832c84061225b6b04', class: "header", part: "ncbf__header" }, h("h3", { key: '5368e8f321140f2bfaf60f6ca3f732f584824301' }, "Customize booking flow"), h("p", { key: '65a0d4d41804f41f7c01a682e4b8b97ebc2c4ef2' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get is() { return "nylas-custom-booking-flow"; }
     static get encapsulation() { return "shadow"; }
@@ -91,6 +98,27 @@ export class NylasCustomBookingFlow {
     }
     static get properties() {
         return {
+            "selectedConfiguration": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Configuration",
+                    "resolved": "Configuration | undefined",
+                    "references": {
+                        "Configuration": {
+                            "location": "import",
+                            "path": "@nylas/core",
+                            "id": "../nylas-js-core/dist/index.d.ts::Configuration"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected config"
+                }
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -162,6 +190,9 @@ export class NylasCustomBookingFlow {
         return [{
                 "propName": "name",
                 "methodName": "elementNameChangedHandler"
+            }, {
+                "propName": "selectedConfiguration",
+                "methodName": "selectedConfigurationChangedHandler"
             }];
     }
     static get listeners() {
@@ -178,6 +209,7 @@ export class NylasCustomBookingFlow {
 __decorate([
     RegisterComponent({
         name: 'nylas-custom-booking-flow',
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-custom-booking-flow.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-custom-booking-flow',\n  styleUrl: 'nylas-custom-booking-flow.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n  @Element() host!: HTMLNylasCustomBookingFlowElement;\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'booking-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected bookingType changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-booking-flow', 'componentDidLoad');\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n    }\n    this.selectedBookingType = this.bookingType;\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-booking-flow', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-booking-flow', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-booking-flow', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-booking-flow', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value } = event.detail;\n      this.selectedBookingType = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually confirm/decline bookings',\n        value: 'pre-booking',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n          <div class=\"header\" part=\"ncbf__header\">\n            <h3>Customize booking flow</h3>\n            <p>Customize how new bookings are handled when a booking is completed.</p>\n          </div>\n\n          {bookingOptions.length > 0 ? (\n            <div class=\"nylas-custom-booking-flow__dropdown\">\n              <span class=\"label\">\n                After a booking is confirmed\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n                    request.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-type\"\n                options={bookingOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n                defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-custom-booking-flow__loading\">\n              <span class=\"label\">\n                Select a calendar to book meetings on <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-custom-booking-flow.js","sourceRoot":"","sources":["../../../../src/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { Configuration } from '@nylas/core';\n\n/**\n * The `nylas-custom-booking-flow` component is a UI component that displays the booking calendar picker.\n * @part ncbf - The custom booking flow container\n * @part ncbf__header - The header of the custom booking flow\n * @part ncbf__dropdown - The dropdown container\n * @part ncbf__dropdown-button - The dropdown button\n * @part ncbf__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-custom-booking-flow',\n  styleUrl: 'nylas-custom-booking-flow.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasCustomBookingFlow {\n  @Element() host!: HTMLNylasCustomBookingFlowElement;\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n\n  /**\n   * The name of the calendar picker.\n   */\n  @Prop() name: string = 'booking-type';\n  /**\n   * The booking type.\n   */\n  @Prop() bookingType: string = '';\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected bookingType.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected bookingType changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-custom-booking-flow', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration, oldValue: Configuration) {\n    debug('nylas-custom-booking-flow', 'selectedConfigurationChangedHandler', newValue, oldValue);\n    if (newValue?.event_booking?.booking_type) {\n      this.bookingType = newValue?.event_booking?.booking_type;\n    }\n    // TODO: Remove this when the internals in tests are fixed.\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.bookingType.toString(), 'booking-calendar');\n    }\n    this.selectedBookingType = this.bookingType;\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-custom-booking-flow', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-custom-booking-flow', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-custom-booking-flow', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-custom-booking-flow', 'componentDidLoad');\n  }\n\n  componentWillUpdate() {\n    debug('nylas-custom-booking-flow', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-custom-booking-flow', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-custom-booking-flow', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-custom-booking-flow', 'componentDidRender');\n  }\n\n  @Listen('selectedOptionChanged')\n  selectedOptionChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-custom-booking-flow', 'selectedOptionChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value } = event.detail;\n      this.selectedBookingType = value;\n      this.internals.setFormValue(value.toString(), 'booking-calendar');\n    };\n    this.valueChanged.emit({ ...event.detail, valueChanged });\n  }\n\n  @RegisterComponent<NylasCustomBookingFlow, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-custom-booking-flow',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingOptions = [\n      {\n        label: 'Automatically accept bookings',\n        value: 'booking',\n      },\n      {\n        label: 'Manually confirm/decline bookings',\n        value: 'pre-booking',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-custom-booking-flow\" part=\"ncbf\">\n          <div class=\"header\" part=\"ncbf__header\">\n            <h3>Customize booking flow</h3>\n            <p>Customize how new bookings are handled when a booking is completed.</p>\n          </div>\n\n          {bookingOptions.length > 0 ? (\n            <div class=\"nylas-custom-booking-flow__dropdown\">\n              <span class=\"label\">\n                After a booking is confirmed\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">\n                    Choose how you’d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking\n                    request.\n                  </span>\n                </tooltip-component>\n              </span>\n              <select-dropdown\n                name=\"booking-type\"\n                options={bookingOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content\"\n                defaultSelectedOption={bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0]}\n              />\n            </div>\n          ) : (\n            <div class=\"nylas-custom-booking-flow__loading\">\n              <span class=\"label\">\n                Select a calendar to book meetings on <info-icon />\n              </span>\n              <div class=\"loading-button\">\n                <span>Loading...</span>\n              </div>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.css

@@ -85,10 +85,22 @@
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
-  height: 80px;
+  min-height: 80px;
   padding: 0 1rem;
   border-top: 1px solid var(--nylas-base-200);
 }
+@media screen and (max-width: 768px) {
+  .footer {
+    flex-direction: column;
+    height: auto;
+  }
+}
+@media screen and (max-width: 768px) {
+  .footer .preview {
+    margin-top: 1rem;
+    width: 100%;
+  }
+}
 .footer .buttons {
   display: flex;
   justify-content: flex-end;
@@ -96,12 +108,32 @@
   justify-self: flex-end;
   gap: 1rem;
 }
-.footer .buttons .unsaved-changes {
+@media screen and (max-width: 768px) {
+  .footer .buttons {
+    flex-direction: column-reverse;
+    width: 100%;
+  }
+}
+.footer .buttons p {
+  max-width: 524px;
+}
+.footer .buttons p.unsaved-changes {
   color: var(--nylas-base-600);
 }
-.footer .buttons .saved-changes {
+.footer .buttons p.saved-changes {
   color: var(--nylas-success);
 }
+.footer .buttons p.error {
+  color: var(--nylas-error);
+}
+.footer .buttons p.error-full-width {
+  max-width: 660px;
+}
+@media screen and (max-width: 768px) {
+  .footer .buttons button-component {
+    width: 100%;
+  }
+}
 .footer .buttons button {
   background: var(--nylas-primary);
   color: var(--nylas-base-0);

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js

@@ -16,25 +16,34 @@ import { RegisterComponent } from "../../../common/register-component";
 import { debug, parsePreviewLink } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 import TabContents from "./tab-contents";
+import { DEFAULT_OPEN_HOURS } from "../../../common/constants";
 export class NylasEditorTabs {
     constructor() {
+        this.setError = (error) => {
+            this.error = error.message;
+        };
         this.formSubmissionHandler = async (event) => {
             event.preventDefault();
+            this.formSubmitted.emit();
+            const valid = this.formRef.checkValidity();
+            if (!valid) {
+                return;
+            }
             this.isLoading = true;
             this.hasUnsavedChanges = false;
-            this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice } = this.formState;
-            const organizer = this.config?.participants?.find(p => p.is_organizer);
+            const formState = this.updateFormState();
+            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice } = formState;
+            const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);
             const configObject = {
-                ...(this.config?.id && { id: this.config.id }),
-                version: this.config?.version ?? '1.0.0',
+                ...this.selectedConfiguration,
+                version: this.selectedConfiguration?.version ?? '1.0.0',
                 availability: {
                     duration_minutes: duration ? parseInt(duration) : 0,
                     availability_rules: {
-                        availability_method: this.config?.availability?.availability_rules?.availability_method ?? 'collective',
+                        availability_method: this.selectedConfiguration?.availability?.availability_rules?.availability_method ?? 'collective',
                         buffer: buffer || { before: 0, after: 0 },
-                        default_open_hours: this.config?.availability?.availability_rules?.default_open_hours ?? [],
-                        round_robin_group_id: this.config?.availability?.availability_rules?.round_robin_group_id ?? '',
+                        default_open_hours: this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
+                        round_robin_group_id: this.selectedConfiguration?.availability?.availability_rules?.round_robin_group_id ?? '',
                     },
                 },
                 participants: [
@@ -44,7 +53,7 @@ export class NylasEditorTabs {
                         is_organizer: true,
                         availability: {
                             calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
-                            open_hours: availability ?? [],
+                            open_hours: availability?.openHours ?? [],
                         },
                         booking: {
                             calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
@@ -56,6 +65,7 @@ export class NylasEditorTabs {
                     description: description?.toString() ?? '',
                     location: location?.toString() ?? '',
                     booking_type: bookingType?.toString() ?? 'booking',
+                    timezone: availability?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
                 },
                 scheduler: {
                     available_days_in_future: availableDaysInFuture ?? 30,
@@ -69,21 +79,23 @@ export class NylasEditorTabs {
                     this.changesSaved = false;
                 }, 5000);
             };
-            this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, action: this.action });
+            this.schedulerConfigChanged.emit({ config: configObject, resetLoadingState, setError: this.setError, action: this.action });
         };
         this.calendars = undefined;
-        this.config = undefined;
+        this.selectedConfiguration = undefined;
         this.currentUser = undefined;
         this.schedulerPreviewLink = '';
         this.action = 'create';
+        this.mode = 'app';
         this.activeTab = 'eventInfo';
         this.isLoading = false;
         this.hasUnsavedChanges = false;
         this.changesSaved = false;
         this.formState = {};
+        this.error = '';
     }
     configChangedHandler(newConfig) {
-        debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.config);
+        debug('[nylas-editor-tabs]', 'configChangedHandler', newConfig, this.selectedConfiguration);
         this.formState = {
             ...this.getFormStateFromConfig(newConfig),
         };
@@ -99,7 +111,7 @@ export class NylasEditorTabs {
     }
     componentWillLoad() {
         debug('[nylas-editor-tabs]', 'componentWillLoad');
-        this.formState = this.getFormStateFromConfig(this.config);
+        this.formState = this.getFormStateFromConfig(this.selectedConfiguration);
     }
     componentDidLoad() {
         debug('[nylas-editor-tabs]', 'componentDidLoad');
@@ -109,8 +121,10 @@ export class NylasEditorTabs {
     }
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
-        this.formState = { ...this.formState, [event.detail.name]: event.detail.value };
+        const { name, value } = event.detail;
+        this.formState = { ...this.formState, [name]: value };
         this.hasUnsavedChanges = true;
+        this.error = '';
     }
     getFormStateFromConfig(config) {
         const organizerParticipant = config?.participants?.find(p => p.is_organizer);
@@ -118,15 +132,18 @@ export class NylasEditorTabs {
             title: config?.event_booking?.title ?? '',
             description: config?.event_booking?.description ?? '',
             duration: config?.availability?.duration_minutes?.toString() ?? '10',
-            availability: organizerParticipant?.availability?.open_hours ?? undefined,
+            availability: {
+                timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
+                open_hours: organizerParticipant?.availability?.open_hours ?? undefined,
+            },
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
             bookingCalendar: organizerParticipant?.booking?.calendar_id ?? organizerParticipant?.email ?? '',
-            location: this.config?.event_booking?.location ?? '',
-            bookingType: this.config?.event_booking?.booking_type ?? 'booking',
-            buffer: this.config?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },
-            availableDaysInFuture: this.config?.scheduler?.available_days_in_future ?? 30,
-            minCancellationNotice: this.config?.scheduler?.min_cancellation_notice ?? 0,
+            location: this.selectedConfiguration?.event_booking?.location ?? '',
+            bookingType: this.selectedConfiguration?.event_booking?.booking_type ?? 'booking',
+            buffer: this.selectedConfiguration?.availability?.availability_rules?.buffer ?? { before: 0, after: 0 },
+            availableDaysInFuture: this.selectedConfiguration?.scheduler?.available_days_in_future ?? 30,
+            minCancellationNotice: this.selectedConfiguration?.scheduler?.min_cancellation_notice ?? 0,
         };
     }
     updateFormState() {
@@ -172,6 +189,7 @@ export class NylasEditorTabs {
             }
         });
         this.formState = { ...this.formState };
+        return this.formState;
     }
     setActiveTab(e, tabName) {
         e.preventDefault();
@@ -180,19 +198,22 @@ export class NylasEditorTabs {
     }
     render() {
         debug('[nylas-editor-tabs]', 'render', this.formState);
-        return (h(Host, { key: '5a1e8ee246d47626dce5515c3ec4df3e6ae893a4' }, h("form", { key: 'f49d1fa60f2724c5cae8c1328dfee945ae24f1e2', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el) }, h("div", { key: 'f0b678836e12c3878128e4b810e5541f00ddee29', class: "form-contents" }, h("div", { key: '910dc155a6b7b01e300084fe405da0d0b0801847', class: "tabs" }, h("button", { key: '80ca54ac98ae0d3b2298ae62253ffcb9d3ae539d', class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { key: '842e45f308921afa7948f8408b84f95d7b802850', width: "16", height: "16" }), "Event Info"), h("button", { key: '7b79207240cbae5dcd554d448f68dc544f2e6c80', class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { key: '47b3d8cf7ee50eac7d377ab3faf35c27f1215e96', width: "16", height: "16" }), "Availability"), h("button", { key: 'ffb175caa6ccc4ba377ee4947759d0561ebb089b', class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { key: 'fc3bec08bd5080e7b2ec7816bb3c021876c20d7c', width: "16", height: "16" }), "Booking Options")), h("div", { key: '80802e1388eb767bcea718907e75d5b4a2de3701', class: "tab-content" }, h(TabContents, { key: '5c5618341227447d2a41061f415e54d83efc354a', formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.config?.id ?? 'new' }))), h("div", { key: 'd315bad7ea2efe6699557a5e07b55053926a7517', class: "footer" }, h("div", { key: '4c92a480ee6d2f04d9fa36f3e870d414835406e1', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        return (h(Host, { key: 'c1e6e9d2cfe242e407a909281063767a0985245e' }, h("form", { key: '4baaac0129e8a357b78980636bd32b3818ec0820', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options")), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: '38bdcdd7283d98ea54c7594a52cc16b85b3b776a', class: "footer" }, h("div", { key: '5543e3f7eb2fa9f2f3bbe6053fde7d0ea13c3bc0', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
-                    window.open(parsePreviewLink(this.schedulerPreviewLink, this.config), '_blank');
+                    window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), h("div", { key: '22fdd2183dcc2c299d2fdacf0db8922a95a5692e', class: "buttons" }, h("p", { key: '63ea7b4d8362f409caec467a7bce22142ccc1b20', class: {
+            }, variant: 'basic' }, "Preview"))), h("div", { key: '62470cdbc7c4670e6ff03e9979ca803f81482b15', class: "buttons" }, h("p", { key: '5ecdfa1082650aab2f8fef8ed7beeb11fedb381c', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
-            } }, this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '6ceded872ee5510234ff79bff3f0173a72314714', type: "button", disabled: this.isLoading, clickHandler: event => {
+                'error': this.error !== '',
+                'error-full-width': this.error !== '' && this.action === 'create',
+            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '1bb3af5cc04c49e311267fb43ac326267acdaa1d', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
-            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '4f33ad6071f503837395d900b67fafc8605d8043', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+                this.error = '';
+            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '28c9725c69104d1849b2ab3068b61a269370f016', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     static get is() { return "nylas-editor-tabs"; }
     static get encapsulation() { return "scoped"; }
@@ -229,7 +250,7 @@ export class NylasEditorTabs {
                     "text": ""
                 }
             },
-            "config": {
+            "selectedConfiguration": {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
@@ -288,6 +309,24 @@ export class NylasEditorTabs {
                 "attribute": "scheduler-preview-link",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'app' | 'composable'",
+                    "resolved": "\"app\" | \"composable\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'app'"
             }
         };
     }
@@ -298,7 +337,8 @@ export class NylasEditorTabs {
             "isLoading": {},
             "hasUnsavedChanges": {},
             "changesSaved": {},
-            "formState": {}
+            "formState": {},
+            "error": {}
         };
     }
     static get events() {
@@ -314,7 +354,7 @@ export class NylasEditorTabs {
                 },
                 "complexType": {
                     "original": "SchedulerEventDetail",
-                    "resolved": "{ config: Partial<Configuration>; action: \"create\" | \"edit\"; resetLoadingState?: ((e: CustomEvent<any>) => void) | undefined; }",
+                    "resolved": "{ config: Partial<Configuration>; action: \"create\" | \"edit\"; resetLoadingState?: ((e: CustomEvent<any>) => void) | undefined; setError?: ((error: Error) => void) | undefined; }",
                     "references": {
                         "SchedulerEventDetail": {
                             "location": "global",
@@ -337,6 +377,21 @@ export class NylasEditorTabs {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "formSubmitted",
+                "name": "formSubmitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted on form submission."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }, {
                 "method": "previewButtonClicked",
                 "name": "previewButtonClicked",
@@ -362,7 +417,7 @@ export class NylasEditorTabs {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "config",
+                "propName": "selectedConfiguration",
                 "methodName": "configChangedHandler"
             }];
     }
@@ -381,20 +436,28 @@ __decorate([
         name: 'nylas-editor-tabs',
         stateToProps: new Map([
             ['schedulerConfig.calendars', 'calendars'],
-            ['schedulerConfig.config', 'config'],
+            ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
             ['schedulerConfig.currentUser', 'currentUser'],
         ]),
         eventToProps: {
             schedulerConfigChanged: async (event, nylasSchedulerConfigConnector) => {
-                const { resetLoadingState, action, config } = event.detail;
-                if (resetLoadingState) {
-                    resetLoadingState(event);
-                }
+                const { resetLoadingState, setError, action, config } = event.detail;
+                const checkForErrors = (response) => {
+                    const [data, error] = response;
+                    if (!data && error && setError) {
+                        setError(error);
+                    }
+                    if (resetLoadingState) {
+                        resetLoadingState(event);
+                    }
+                };
                 if (action === 'edit') {
-                    await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);
+                    const response = await nylasSchedulerConfigConnector.schedulerConfig.updateConfiguration(config);
+                    checkForErrors(response);
                 }
                 else {
-                    await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);
+                    const response = await nylasSchedulerConfigConnector.schedulerConfig.createConfiguration(config);
+                    checkForErrors(response);
                 }
             },
             cancelButtonClick: async (_, nylasSchedulerConfigConnector) => {