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

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

@@ -1,38 +1,37 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { X as Xr, g as global, N as NylasBaseProvider } from './index.es.js';
-import { d as debug } from './utils.js';
+import { c as dataResponse, d as debug, e as commonjsGlobal } from './utils.js';
 import { C as CreateNylasSchedulerConfigStore } from './scheduler-config-store.js';
-import { N as NylasIdentityRequestWrapper } from './nylas-api-request.js';
-import { c as commonjsGlobal } from './_commonjsHelpers.js';
-import { d as defineCustomElement$B } from './add-circle.js';
-import { d as defineCustomElement$A } from './button-component2.js';
-import { d as defineCustomElement$z } from './calendar.js';
-import { d as defineCustomElement$y } from './calendar-info.js';
-import { d as defineCustomElement$x } from './calendar-patterns.js';
-import { d as defineCustomElement$w } from './chevron.js';
-import { d as defineCustomElement$v } from './close.js';
-import { d as defineCustomElement$u } from './flow.js';
-import { d as defineCustomElement$t } from './globe.js';
-import { d as defineCustomElement$s } from './google-logo.js';
-import { d as defineCustomElement$r } from './info.js';
-import { d as defineCustomElement$q } from './loading.js';
-import { d as defineCustomElement$p } from './location.js';
-import { d as defineCustomElement$o } from './location-off.js';
-import { d as defineCustomElement$n } from './microsoft-logo.js';
-import { d as defineCustomElement$m } from './multi-select-dropdown2.js';
-import { d as defineCustomElement$l } from './nylas-availability-picker2.js';
-import { d as defineCustomElement$k } from './nylas-booking-calendar-picker2.js';
-import { d as defineCustomElement$j } from './nylas-buffer-time2.js';
-import { d as defineCustomElement$i } from './nylas-calendar-picker2.js';
-import { d as defineCustomElement$h } from './nylas-custom-booking-flow2.js';
-import { d as defineCustomElement$g } from './nylas-editor-tabs2.js';
-import { d as defineCustomElement$f } from './nylas-event-description2.js';
-import { d as defineCustomElement$e } from './nylas-event-duration2.js';
-import { d as defineCustomElement$d } from './nylas-event-info2.js';
-import { d as defineCustomElement$c } from './nylas-event-limits2.js';
-import { d as defineCustomElement$b } from './nylas-event-title2.js';
-import { d as defineCustomElement$a } from './nylas-form-card2.js';
-import { d as defineCustomElement$9 } from './nylas-limit-future-bookings2.js';
+import { d as defineCustomElement$C } from './add-circle.js';
+import { d as defineCustomElement$B } from './button-component2.js';
+import { d as defineCustomElement$A } from './calendar.js';
+import { d as defineCustomElement$z } from './calendar-info.js';
+import { d as defineCustomElement$y } from './calendar-patterns.js';
+import { d as defineCustomElement$x } from './chevron.js';
+import { d as defineCustomElement$w } from './close.js';
+import { d as defineCustomElement$v } from './flow.js';
+import { d as defineCustomElement$u } from './globe.js';
+import { d as defineCustomElement$t } from './google-logo.js';
+import { d as defineCustomElement$s } from './info.js';
+import { d as defineCustomElement$r } from './loading.js';
+import { d as defineCustomElement$q } from './location.js';
+import { d as defineCustomElement$p } from './location-off.js';
+import { d as defineCustomElement$o } from './microsoft-logo.js';
+import { d as defineCustomElement$n } from './multi-select-dropdown2.js';
+import { d as defineCustomElement$m } from './nylas-availability-picker2.js';
+import { d as defineCustomElement$l } from './nylas-booking-calendar-picker2.js';
+import { d as defineCustomElement$k } from './nylas-buffer-time2.js';
+import { d as defineCustomElement$j } from './nylas-calendar-picker2.js';
+import { d as defineCustomElement$i } from './nylas-custom-booking-flow2.js';
+import { d as defineCustomElement$h } from './nylas-editor-tabs2.js';
+import { d as defineCustomElement$g } from './nylas-event-description2.js';
+import { d as defineCustomElement$f } from './nylas-event-duration2.js';
+import { d as defineCustomElement$e } from './nylas-event-info2.js';
+import { d as defineCustomElement$d } from './nylas-event-limits2.js';
+import { d as defineCustomElement$c } from './nylas-event-title2.js';
+import { d as defineCustomElement$b } from './nylas-form-card2.js';
+import { d as defineCustomElement$a } from './nylas-limit-future-bookings2.js';
+import { d as defineCustomElement$9 } from './nylas-list-configurations2.js';
 import { d as defineCustomElement$8 } from './nylas-location-component2.js';
 import { d as defineCustomElement$7 } from './nylas-min-cancellation-notice2.js';
 import { d as defineCustomElement$6 } from './nylas-time-window-picker2.js';
@@ -41,43 +40,111 @@ import { d as defineCustomElement$4 } from './select-dropdown2.js';
 import { d as defineCustomElement$3 } from './time-period-selector2.js';
 import { d as defineCustomElement$2 } from './toolitp-component.js';
 
+class NylasApiRequest {
+}
+class NylasIdentityRequestWrapper {
+    constructor(session) {
+        this.session = session;
+    }
+    setActiveGrantId(grantId) {
+        this.activeGrantId = grantId;
+    }
+    async request({ method, path, body, headers }) {
+        try {
+            const response = await this.session.fetch(`grants/me/${path}`, {
+                method,
+                headers: headers ? new Headers(headers) : undefined,
+                body,
+                ...(this.session.isMultiAccount() && this.activeGrantId ? { grant_id: this.activeGrantId } : {}),
+            });
+            return dataResponse(response);
+        }
+        catch (error) {
+            return dataResponse(null, {
+                message: String(error),
+            });
+        }
+    }
+    async currentUser() {
+        const grantId = this.session.isMultiAccount() ? this.activeGrantId : undefined;
+        const idToken = await this.session.getProfile(grantId);
+        if (!idToken) {
+            return null;
+        }
+        return {
+            id: idToken.sub,
+            email: idToken.email,
+            name: idToken.name,
+        };
+    }
+    async authenticationUrl(authArgs) {
+        return this.session.auth(authArgs || {});
+    }
+}
+
 class NylasSchedulerConfigAPIConnector {
     constructor({ nylasApiRequest, nylasSchedulerConfigStore }) {
         this.nylasApiRequest = nylasApiRequest;
         this.nylasSchedulerConfigStore = nylasSchedulerConfigStore;
     }
     async currentUser() {
+        if (!this.nylasApiRequest) {
+            console.warn('Nylas API Request is not initialized');
+            return null;
+        }
         return this.nylasApiRequest.currentUser();
     }
     async getCalendars() {
-        const response = await this.nylasApiRequest.request({
+        if (!this.nylasApiRequest) {
+            console.warn('Nylas API Request is not initialized');
+            return dataResponse(null, {
+                message: 'Error fetching calendars: Nylas API Request is not initialized',
+            });
+        }
+        const [response, error] = await this.nylasApiRequest.request({
             method: 'GET',
             path: `calendars`,
         });
+        if (error) {
+            return dataResponse(null, {
+                message: 'Error fetching calendars: ' + error.message,
+            });
+        }
         if (Xr(response)) {
-            return {
-                error: 'Error fetching calendars: ' + response.error?.message,
-            };
+            return dataResponse(null, {
+                message: 'Error fetching calendars: ' + response.error?.message,
+            });
         }
         this.nylasSchedulerConfigStore.state.calendars = response.data;
-        return response?.data;
+        return dataResponse(response.data);
     }
     async getConfigurationById(configurationId, forceFetch = false) {
+        if (!this.nylasApiRequest) {
+            console.warn('Nylas API Request is not initialized');
+            return dataResponse(null, {
+                message: 'Error fetching configuration: Nylas API Request is not initialized',
+            });
+        }
         if (!forceFetch) {
             const existingConfig = this.nylasSchedulerConfigStore.state.configurations.find(c => c.id === configurationId);
             if (existingConfig) {
                 this.nylasSchedulerConfigStore.state.config = existingConfig;
-                return existingConfig;
+                return dataResponse(existingConfig);
             }
         }
-        const response = await this.nylasApiRequest.request({
+        const [response, error] = await this.nylasApiRequest.request({
             method: 'GET',
             path: `scheduling/configurations/${configurationId}`,
         });
+        if (error) {
+            return dataResponse(null, {
+                message: 'Error fetching configuration: ' + error.message,
+            });
+        }
         if (Xr(response)) {
-            return {
-                error: 'Error fetching configuration: ' + response.error?.message,
-            };
+            return dataResponse(null, {
+                message: 'Error fetching configuration: ' + response.error?.message,
+            });
         }
         this.nylasSchedulerConfigStore.state.config = response.data;
         if (this.nylasSchedulerConfigStore.state.configurations.find(c => c.id === configurationId)) {
@@ -86,46 +153,80 @@ class NylasSchedulerConfigAPIConnector {
         else {
             this.nylasSchedulerConfigStore.state.configurations = [...this.nylasSchedulerConfigStore.state.configurations, response.data];
         }
-        return response?.data;
+        return dataResponse(response.data);
     }
     async getConfigurations() {
-        const response = await this.nylasApiRequest.request({
+        if (!this.nylasApiRequest) {
+            console.warn('Nylas API Request is not initialized');
+            return dataResponse(null, {
+                message: 'Error fetching configurations: Nylas API Request is not initialized',
+            });
+        }
+        const [response, error] = await this.nylasApiRequest.request({
             method: 'GET',
             path: `scheduling/configurations`,
         });
+        if (error) {
+            return dataResponse(null, {
+                message: 'Error fetching configurations: ' + error.message,
+            });
+        }
         if (Xr(response)) {
-            return {
-                error: 'Error fetching configurations: ' + response.error?.message,
-            };
+            return dataResponse(null, {
+                message: 'Error fetching configurations: ' + response.error?.message,
+            });
         }
         this.nylasSchedulerConfigStore.state.configurations = response.data;
-        return response?.data;
+        return dataResponse(response.data);
     }
     async createConfiguration(configuration) {
-        const response = await this.nylasApiRequest.request({
+        if (!this.nylasApiRequest) {
+            console.warn('Nylas API Request is not initialized');
+            return dataResponse(null, {
+                message: 'Error creating configuration: Nylas API Request is not initialized',
+            });
+        }
+        configuration.requires_session_auth = this.nylasSchedulerConfigStore.state.defaultRequiresSessionAuth;
+        const [response, error] = await this.nylasApiRequest.request({
             method: 'POST',
             path: `scheduling/configurations`,
             body: configuration,
         });
+        if (error) {
+            return dataResponse(null, {
+                message: 'Error creating configuration: ' + error.message,
+            });
+        }
         if (Xr(response)) {
-            return {
-                error: 'Error creating configuration: ' + response.error?.message,
-            };
+            return dataResponse(null, {
+                message: 'Error creating configuration: ' + response.error?.message,
+            });
         }
         this.nylasSchedulerConfigStore.state.config = response.data;
         this.nylasSchedulerConfigStore.state.configurations = [...this.nylasSchedulerConfigStore.state.configurations, response.data];
-        return response?.data;
+        return dataResponse(response.data);
     }
     async updateConfiguration(configuration) {
-        const response = await this.nylasApiRequest.request({
+        if (!this.nylasApiRequest) {
+            console.warn('Nylas API Request is not initialized');
+            return dataResponse(null, {
+                message: 'Error updating configuration: Nylas API Request is not initialized',
+            });
+        }
+        const [response, error] = await this.nylasApiRequest.request({
             method: 'PUT',
             path: `scheduling/configurations/${configuration.id}`,
             body: configuration,
         });
+        if (error) {
+            return dataResponse(null, {
+                message: 'Error updating configuration: ' + error.message,
+            });
+        }
         if (Xr(response)) {
-            return {
-                error: 'Error updating configuration: ' + response.error?.message,
-            };
+            return dataResponse(null, {
+                message: 'Error updating configuration: ' + response.error?.message,
+            });
         }
         this.nylasSchedulerConfigStore.state.config = response.data;
         if (this.nylasSchedulerConfigStore.state.configurations.find(c => c.id === configuration.id)) {
@@ -134,7 +235,34 @@ class NylasSchedulerConfigAPIConnector {
         else {
             this.nylasSchedulerConfigStore.state.configurations = [...this.nylasSchedulerConfigStore.state.configurations, response.data];
         }
-        return response?.data;
+        return dataResponse(response.data);
+    }
+    async deleteConfiguration(configurationId) {
+        if (!this.nylasApiRequest) {
+            console.warn('Nylas API Request is not initialized');
+            return dataResponse(null, {
+                message: 'Error deleting configuration: Nylas API Request is not initialized',
+            });
+        }
+        const [response, error] = await this.nylasApiRequest.request({
+            method: 'DELETE',
+            path: `scheduling/configurations/${configurationId}`,
+        });
+        if (error) {
+            return dataResponse(null, {
+                message: 'Error deleting configuration: ' + error.message,
+            });
+        }
+        if (Xr(response)) {
+            return dataResponse(null, {
+                message: 'Error deleting configuration: ' + response.error?.message,
+            });
+        }
+        this.nylasSchedulerConfigStore.state.configurations = this.nylasSchedulerConfigStore.state.configurations.filter(c => c.id !== configurationId);
+        if (this.nylasSchedulerConfigStore.state.config?.id === configurationId) {
+            this.nylasSchedulerConfigStore.state.config = {};
+        }
+        return dataResponse(response.data);
     }
 }
 
@@ -7242,7 +7370,50 @@ function useNylasSessions(identity) {
     };
 }
 
-const nylasSchedulerEditorCss = ":host{display:flex;flex-direction:column;overflow:visible;border-radius:var(--nylas-border-radius-2x);width:fit-content;background:var(--nylas-base-0);position:relative;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}@media screen and (max-width: 768px){:host{width:auto;min-width:325px}}div.scheduler-editor-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--nylas-base-200);color:var(--nylas-base-900)}div.scheduler-editor-header h1.scheduler-editor-title{display:flex;align-items:center;gap:0.5rem;width:858px;margin:0;font-size:18px;line-height:24px;font-weight:600}@media screen and (max-width: 768px){div.scheduler-editor-header h1.scheduler-editor-title{width:auto;min-width:calc(325px - 1rem)}}div.scheduler-editor-header button{background:transparent;border:none;cursor:pointer}div.scheduler-editor-header button:hover,div.scheduler-editor-header button:active{color:var(--nylas-primary)}div.scheduler-editor-header button:disabled{cursor:not-allowed}nylas-editor-tabs{width:auto}.card{display:flex;flex-direction:column;padding:2rem;background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:5px;max-width:fit-content;align-self:center}.login-required{display:flex;flex-direction:column;padding:2rem 1rem;background-color:var(--nylas-base-25)}.login-required p{margin:0 0 1rem}.login-required .microsoft-button,.login-required .google-button{height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;display:flex;margin-bottom:1rem;background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:5px;justify-content:center;gap:0.5rem;align-items:center}.login-required .microsoft-button:hover,.login-required .google-button:hover{background-color:var(--nylas-base-25)}.login-required .other-provider-button{height:48px;border:none;border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;cursor:pointer;display:flex;border:0;background-color:var(--nylas-base-0);height:48px;margin-bottom:1rem;font-size:0.95rem;justify-content:center;gap:0.25rem;align-items:center}.login-required .other-provider-button svg{transform:rotate(180deg)}.login-required .other-provider-button:hover{background-color:var(--nylas-base-25)}.login-required .disclaimer-text{font-size:0.75rem;color:var(--nylas-base-600);align-self:center}";
+const LoginRequired = ({ authenticationUrl }) => (h("div", { class: 'login-required' },
+    h("div", { class: 'card' },
+        h("p", null, "Log into your account to use the Scheduler Editor."),
+        h("button", { class: "google-button", onClick: async (event) => {
+                event.preventDefault();
+                const authUrl = await authenticationUrl('google');
+                if (authUrl) {
+                    window.location.href = authUrl;
+                }
+                else {
+                    console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
+                }
+            } },
+            h("span", { class: "icon" },
+                h("google-logo-icon", { width: "15", height: "15" })),
+            "Continue with Google"),
+        h("button", { class: "microsoft-button", onClick: async (event) => {
+                event.preventDefault();
+                const authUrl = await authenticationUrl('microsoft');
+                if (authUrl) {
+                    window.location.href = authUrl;
+                }
+                else {
+                    console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
+                }
+            } },
+            h("span", { class: "icon" },
+                h("microsoft-logo-icon", { width: "15", height: "15" })),
+            "Continue with Microsoft"),
+        h("button", { class: "other-provider-button", onClick: async (event) => {
+                event.preventDefault();
+                const authUrl = await authenticationUrl();
+                if (authUrl) {
+                    window.location.href = authUrl;
+                }
+                else {
+                    console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
+                }
+            } },
+            "View all providers ",
+            h("chevron-icon", { width: "17", height: "17" })),
+        h("small", { class: "disclaimer-text" }, "* You will be redirected to authenticate your account."))));
+
+const nylasSchedulerEditorCss = ":host{display:flex;flex-direction:column;overflow:visible;border-radius:var(--nylas-border-radius-2x);width:fit-content;background:var(--nylas-base-0);position:relative;box-shadow:0px 4px 6px -2px rgba(0, 0, 0, 0.05), 0px 10px 15px -3px rgba(0, 0, 0, 0.1);--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}@media screen and (max-width: 768px){:host{width:auto;min-width:325px}}div.scheduler-editor-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--nylas-base-200);color:var(--nylas-base-900)}div.scheduler-editor-header h1.scheduler-editor-title{display:flex;align-items:center;gap:0.5rem;width:858px;margin:0;font-size:18px;line-height:24px;font-weight:600}@media screen and (max-width: 768px){div.scheduler-editor-header h1.scheduler-editor-title{width:auto;min-width:calc(325px - 1rem)}}div.scheduler-editor-header button{background:transparent;border:none;cursor:pointer}div.scheduler-editor-header button:hover,div.scheduler-editor-header button:active{color:var(--nylas-primary)}div.scheduler-editor-header button:disabled{cursor:not-allowed}nylas-editor-tabs{width:auto}.card{display:flex;flex-direction:column;padding:2rem;background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:5px;max-width:fit-content;align-self:center}.login-required{display:flex;flex-direction:column;padding:2rem 1rem;background-color:var(--nylas-base-25)}.login-required p{margin:0 0 1rem}.login-required .microsoft-button,.login-required .google-button{height:48px;border:1px solid var(--nylas-base-300);border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;background-color:var(--nylas-base-0);font-weight:600;cursor:pointer;display:flex;margin-bottom:1rem;background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);border-radius:5px;justify-content:center;gap:0.5rem;align-items:center}.login-required .microsoft-button:hover,.login-required .google-button:hover{background-color:var(--nylas-base-25)}.login-required .microsoft-button:hover,.login-required .google-button:hover{background-color:var(--nylas-base-25)}.login-required .other-provider-button{height:48px;border:1px solid var(--nylas-base-300);border-radius:var(--nylas-border-radius-2x);font-size:1rem;line-height:24px;padding:0 1rem;background-color:var(--nylas-base-0);font-weight:600;cursor:pointer;display:flex;border:0;background-color:var(--nylas-base-0);height:48px;margin-bottom:1rem;font-size:0.95rem;justify-content:center;gap:0.25rem;align-items:center}.login-required .other-provider-button:hover{background-color:var(--nylas-base-25)}.login-required .other-provider-button svg{transform:rotate(180deg)}.login-required .other-provider-button:hover{background-color:var(--nylas-base-25)}.login-required .disclaimer-text{font-size:0.75rem;color:var(--nylas-base-600);align-self:center}.list-configurations{padding:2rem}";
 
 const NylasSchedulerEditor$1 = proxyCustomElement(class NylasSchedulerEditor extends HTMLElement {
     constructor() {
@@ -7256,10 +7427,20 @@ const NylasSchedulerEditor$1 = proxyCustomElement(class NylasSchedulerEditor ext
         this.handleSchedulerConfigCloseClicked = (_event) => {
             this.schedulerConfigCloseClicked.emit(this.host);
         };
+        this.authenticationUrl = async (provider) => {
+            if (!this.nylasApiRequest) {
+                console.error(`[nylas-scheduler-editor] Nylas API Request is not initialized.`);
+                return '';
+            }
+            const url = await this.nylasApiRequest.authenticationUrl({ provider });
+            return url || '';
+        };
+        this.defaultRequiresSessionAuth = true;
         this.configurationId = undefined;
         this.nylasApiRequest = undefined;
         this.nylasSessionsConfig = undefined;
         this.eventOverrides = {};
+        this.schedulerPreviewLink = '';
         this.defaultSchedulerConfigStoreState = undefined;
         this.mode = 'app';
         this.automaticComponentRegistration = true;
@@ -7274,15 +7455,23 @@ const NylasSchedulerEditor$1 = proxyCustomElement(class NylasSchedulerEditor ext
                 ...this.defaultSchedulerConfigStoreState,
             }),
         };
+        this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', this.defaultRequiresSessionAuth);
         if (!this.nylasApiRequest && this.nylasSessionsConfig) {
             const nylasSession = new NylasSessions(this.nylasSessionsConfig);
+            await nylasSession.isLoggedIn();
+            nylasSession.onLoginSuccess(async () => {
+                const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();
+                if (currentUser) {
+                    this.loggedIn.emit(this.host);
+                    this.loggedInHandler(currentUser);
+                }
+            });
+            nylasSession.onLoginFail(async () => {
+                this.stores?.schedulerConfig?.set('currentUser', null);
+                this.loggedOut.emit(this.host);
+            });
             this.nylasApiRequest = new NylasIdentityRequestWrapper(nylasSession);
         }
-        if (!this.nylasApiRequest) {
-            debug(`[nylas-scheduler-editor] No NylasApiRequest provided. Unable to continue.`);
-            console.error(`[nylas-scheduler-editor] No NylasApiRequest provided. Unable to continue.`);
-            return;
-        }
         this.baseProvider = new NylasBaseProvider(this.host, this.stores, this.automaticComponentRegistration, this.eventOverrides);
         const nylasSchedulerConfigStore = this.baseProvider.getStore('schedulerConfig');
         this.nylasSchedulerConfigConnector = new NylasSchedulerConfigConnector({
@@ -7293,33 +7482,39 @@ const NylasSchedulerEditor$1 = proxyCustomElement(class NylasSchedulerEditor ext
         if (!initEvent.defaultPrevented) {
             const currentUser = await this.nylasSchedulerConfigConnector?.schedulerConfig?.currentUser();
             if (currentUser) {
-                this.stores?.schedulerConfig?.set('currentUser', currentUser);
-                if (this.configurationId) {
-                    await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(this.configurationId);
-                }
                 this.loggedIn.emit(this.host);
+                await this.loggedInHandler(currentUser);
             }
             else {
                 this.stores?.schedulerConfig?.set('currentUser', null);
                 this.loggedOut.emit(this.host);
             }
         }
+        this.stores?.schedulerConfig?.onChange('config', async (config) => {
+            if (config && config.id) {
+                this.configurationId = config.id;
+            }
+        });
         this.baseProvider?.componentWillLoad(this.nylasSchedulerConfigConnector);
     }
     async componentDidLoad() {
         debug(`[nylas-scheduler-editor] componentDidLoad`);
         this.baseProvider?.componentDidLoad();
-        await this.nylasSchedulerConfigConnector?.schedulerConfig?.getCalendars();
     }
     componentDisconnected() {
         this.baseProvider?.componentDisconnected();
     }
+    defaultRequiresSessionAuthChanged(newRequireSessionAuth) {
+        this.stores?.schedulerConfig?.set('defaultRequiresSessionAuth', newRequireSessionAuth);
+    }
     async configurationIdChanged(newConfigurationId) {
         if (newConfigurationId) {
             await this.nylasSchedulerConfigConnector?.schedulerConfig?.getConfigurationById(newConfigurationId);
+            this.stores?.schedulerConfig?.set('action', 'edit');
         }
         else {
             this.stores?.schedulerConfig?.set('config', {});
+            this.stores?.schedulerConfig?.set('action', null);
         }
     }
     async store() {
@@ -7334,60 +7529,50 @@ const NylasSchedulerEditor$1 = proxyCustomElement(class NylasSchedulerEditor ext
     async unregisterComponentHandler(event) {
         this.baseProvider?.unregisterComponent(event.detail);
     }
+    async loggedInHandler(currentUser) {
+        this.stores?.schedulerConfig?.set('currentUser', currentUser);
+        if (!this.nylasSchedulerConfigConnector) {
+            return;
+        }
+        if (this.configurationId) {
+            await this.nylasSchedulerConfigConnector.schedulerConfig?.getConfigurationById(this.configurationId);
+        }
+        await this.nylasSchedulerConfigConnector.schedulerConfig?.getCalendars();
+    }
     render() {
         const defaultEditor = this.mode === 'app';
         if (defaultEditor) {
-            return (h(Host, null, h("div", { class: "scheduler-editor-header", part: "nse__header" }, h("h1", { class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { width: "18", height: "18" }), "Scheduler editor"), h("button", { class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { width: "18", height: "18" }))), this.stores?.schedulerConfig?.state.currentUser && h("nylas-editor-tabs", null), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, h("div", { class: 'login-required' }, h("div", { class: 'card' }, h("p", null, "Log into your account to use the Scheduler Editor."), h("button", { class: "google-button", onClick: async () => {
-                    const authUrl = await this.nylasApiRequest?.authenticationUrl({ provider: 'google' });
-                    if (authUrl) {
-                        window.location.href = authUrl;
-                    }
-                    else {
-                        console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
-                    }
-                } }, h("span", { class: "icon" }, h("google-logo-icon", { width: "15", height: "15" })), "Continue with Google"), h("button", { class: "microsoft-button", onClick: async () => {
-                    const authUrl = await this.nylasApiRequest?.authenticationUrl({ provider: 'microsoft' });
-                    if (authUrl) {
-                        window.location.href = authUrl;
-                    }
-                    else {
-                        console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
-                    }
-                } }, h("span", { class: "icon" }, h("microsoft-logo-icon", { width: "15", height: "15" })), "Continue with Microsoft"), h("button", { class: "other-provider-button", onClick: async () => {
-                    const authUrl = await this.nylasApiRequest?.authenticationUrl();
-                    if (authUrl) {
-                        window.location.href = authUrl;
-                    }
-                    else {
-                        console.error(`[nylas-scheduler-editor] Unable to get authentication URL.`);
-                    }
-                } }, "View all providers ", h("chevron-icon", { width: "17", height: "17" })), h("small", { class: "disclaimer-text" }, "* You will be redirected to authenticate your account.")))))));
+            return (h(Host, null, h("div", { class: "scheduler-editor-header", part: "nse__header" }, h("h1", { class: "scheduler-editor-title", part: "nse__title" }, h("calendar-icon", { width: "18", height: "18" }), "Scheduler editor"), h("button", { class: "scheduler-editor-close", onClick: e => this.handleSchedulerConfigCloseClicked(e), part: "nse__close-button" }, h("close-icon", { width: "18", height: "18" }))), this.stores?.schedulerConfig?.state.currentUser && this.stores.schedulerConfig.state.action === null && (h("div", { class: "list-configurations" }, h("nylas-list-configurations", null))), this.stores?.schedulerConfig?.state.currentUser && (this.stores.schedulerConfig.state.action === 'create' || this.stores.schedulerConfig.state.action === 'edit') && (h("nylas-editor-tabs", null)), !this.stores?.schedulerConfig?.state.currentUser && (h("slot", { name: "login-required" }, h(LoginRequired, { authenticationUrl: this.authenticationUrl })))));
         }
         return (h(Host, null, h("slot", null)));
     }
     get host() { return this; }
     static get watchers() { return {
+        "defaultRequiresSessionAuth": ["defaultRequiresSessionAuthChanged"],
         "configurationId": ["configurationIdChanged"]
     }; }
     static get style() { return nylasSchedulerEditorCss; }
 }, [1, "nylas-scheduler-editor", {
-        "configurationId": [1, "configuration-id"],
-        "nylasApiRequest": [16],
+        "defaultRequiresSessionAuth": [1028, "default-requires-session-auth"],
+        "configurationId": [1025, "configuration-id"],
+        "nylasApiRequest": [1040],
         "nylasSessionsConfig": [16],
         "eventOverrides": [16],
+        "schedulerPreviewLink": [1, "scheduler-preview-link"],
         "defaultSchedulerConfigStoreState": [16],
         "mode": [1],
         "automaticComponentRegistration": [32],
         "store": [64],
         "schedulerConnector": [64]
     }, [[0, "registerComponent", "registerComponentHandler"], [0, "unregisterComponent", "unregisterComponentHandler"]], {
+        "defaultRequiresSessionAuth": ["defaultRequiresSessionAuthChanged"],
         "configurationId": ["configurationIdChanged"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nylas-scheduler-editor", "add-circle-icon", "button-component", "calendar-icon", "calendar-info-icon", "calendar-patterns-icon", "chevron-icon", "close-icon", "flow-icon", "globe-icon", "google-logo-icon", "info-icon", "loading-icon", "location-icon", "location-off-icon", "microsoft-logo-icon", "multi-select-dropdown", "nylas-availability-picker", "nylas-booking-calendar-picker", "nylas-buffer-time", "nylas-calendar-picker", "nylas-custom-booking-flow", "nylas-editor-tabs", "nylas-event-description", "nylas-event-duration", "nylas-event-info", "nylas-event-limits", "nylas-event-title", "nylas-form-card", "nylas-limit-future-bookings", "nylas-location-component", "nylas-min-cancellation-notice", "nylas-time-window-picker", "search-icon", "select-dropdown", "time-period-selector", "tooltip-component"];
+    const components = ["nylas-scheduler-editor", "add-circle-icon", "button-component", "calendar-icon", "calendar-info-icon", "calendar-patterns-icon", "chevron-icon", "close-icon", "flow-icon", "globe-icon", "google-logo-icon", "info-icon", "loading-icon", "location-icon", "location-off-icon", "microsoft-logo-icon", "multi-select-dropdown", "nylas-availability-picker", "nylas-booking-calendar-picker", "nylas-buffer-time", "nylas-calendar-picker", "nylas-custom-booking-flow", "nylas-editor-tabs", "nylas-event-description", "nylas-event-duration", "nylas-event-info", "nylas-event-limits", "nylas-event-title", "nylas-form-card", "nylas-limit-future-bookings", "nylas-list-configurations", "nylas-location-component", "nylas-min-cancellation-notice", "nylas-time-window-picker", "search-icon", "select-dropdown", "time-period-selector", "tooltip-component"];
     components.forEach(tagName => { switch (tagName) {
         case "nylas-scheduler-editor":
             if (!customElements.get(tagName)) {
@@ -7396,145 +7581,150 @@ function defineCustomElement$1() {
             break;
         case "add-circle-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$B();
+                defineCustomElement$C();
             }
             break;
         case "button-component":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "calendar-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "calendar-info-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "calendar-patterns-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$x();
+                defineCustomElement$y();
             }
             break;
         case "chevron-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$w();
+                defineCustomElement$x();
             }
             break;
         case "close-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$v();
+                defineCustomElement$w();
             }
             break;
         case "flow-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$u();
+                defineCustomElement$v();
             }
             break;
         case "globe-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$u();
             }
             break;
         case "google-logo-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$t();
             }
             break;
         case "info-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "loading-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "location-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "location-off-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "microsoft-logo-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "multi-select-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "nylas-availability-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "nylas-booking-calendar-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "nylas-buffer-time":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "nylas-calendar-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "nylas-custom-booking-flow":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "nylas-editor-tabs":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "nylas-event-description":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "nylas-event-duration":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "nylas-event-info":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "nylas-event-limits":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "nylas-event-title":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "nylas-form-card":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "nylas-limit-future-bookings":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "nylas-list-configurations":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
@@ -7576,11 +7766,10 @@ function defineCustomElement$1() {
             break;
     } });
 }
-defineCustomElement$1(NylasSchedulerEditor$1);
 
 const NylasSchedulerEditor = NylasSchedulerEditor$1;
 const defineCustomElement = defineCustomElement$1;
 
-export { NylasSchedulerEditor, defineCustomElement };
+export { NylasIdentityRequestWrapper as N, NylasSchedulerEditor, defineCustomElement };
 
 //# sourceMappingURL=nylas-scheduler-editor.js.map