@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241015194719

package/dist/collection/components/scheduler/nylas-scheduling/test/nylas-scheduling.spec.js

@@ -1,5 +1,7 @@
 import { newSpecPage } from "@stencil/core/testing";
 import { NylasScheduling } from "../nylas-scheduling";
+import { NylasBookingForm } from "../../nylas-booking-form/nylas-booking-form";
+import { NylasSelectedEventCard } from "../../nylas-selected-event-card/nylas-selected-event-card";
 import { h } from "@stencil/core";
 describe('nylas-scheduling', () => {
     const REAL_DATE = Date;
@@ -162,5 +164,146 @@ describe('nylas-scheduling', () => {
         const footer = page?.root?.shadowRoot?.querySelector('.footer');
         expect(footer?.textContent).not.toContain('Powered by Nylas');
     });
+    it('redirects with the query params when redirectUrl is set', async () => {
+        const configSettings = {
+            name: '',
+            slug: '',
+            configuration_id: '19ca4a10-be05-4d1b-a830-5b639a362cef',
+            scheduler: {
+                available_days_in_future: 30,
+                min_cancellation_notice: 0,
+                min_booking_notice: 60,
+                rescheduling_url: 'https://book.nylas.com/scheduler/reschedule/:booking_ref',
+                cancellation_url: 'https://book.nylas.com/scheduler/cancel/:booking_ref',
+                organizer_confirmation_url: 'https://book.nylas.com/scheduler/confirm/:booking_ref',
+                confirmation_redirect_url: 'https://nylas.com',
+                hide_rescheduling_options: false,
+                hide_cancellation_options: false,
+                hide_additional_guests: false,
+                cancellation_policy: '',
+                additional_fields: {
+                    dropdown: {
+                        label: 'Dropdown Label',
+                        type: 'dropdown',
+                        required: false,
+                        order: 2,
+                        options: ['option 1', 'option 2'],
+                    },
+                    short_text: {
+                        label: 'Short Text Label',
+                        type: 'text',
+                        required: false,
+                        order: 1,
+                    },
+                },
+            },
+            organizer: {
+                email: 'pooja.g@nylas.com',
+                name: '',
+            },
+            booking_type: 'booking',
+            appearance: {
+                company_logo_url: '',
+            },
+        };
+        const defaultSchedulerState = {
+            showBookingForm: true,
+            availability: [
+                {
+                    emails: ['pooja.g@nylas.com'],
+                    end_time: 1728639000,
+                    start_time: 1728637200,
+                },
+            ],
+            selectableDates: [new Date(1728639000000)],
+            selectedDate: new Date(1728639000000),
+            selectedTimeslot: {
+                end_time: 1728639000,
+                start_time: 1728637200,
+                emails: ['janedoe@example.com'],
+            },
+            selectedTimezone: 'America/Los_Angeles',
+            bookingInfo: {
+                primaryParticipant: {
+                    name: 'John Doe',
+                    email: 'johndoe@example.com',
+                },
+                guests: [],
+                additionalFields: {
+                    short_text: {
+                        value: 'some value',
+                        type: 'text',
+                    },
+                    dropdown: {
+                        value: 'option 2',
+                        type: 'dropdown',
+                    },
+                    field2: {
+                        value: 'some value',
+                        type: 'text',
+                    },
+                },
+            },
+            configSettings: { ...configSettings },
+        };
+        jest.spyOn(global, 'fetch').mockImplementation(url => {
+            if (url === 'https://api.us.nylas.com/v3/scheduling/ui-settings?configuration_id=19ca4a10-be05-4d1b-a830-5b639a362cef') {
+                return Promise.resolve({ request_id: 'test', data: configSettings });
+            }
+            else if (url === 'https://api.us.nylas.com/v3/scheduling/bookings?configuration_id=19ca4a10-be05-4d1b-a830-5b639a362cef') {
+                return Promise.resolve({
+                    json: () => Promise.resolve({
+                        request_id: '1729109187-ffa7e86e-c276-45c2-8cda-e3205e46d234',
+                        data: {
+                            event_id: 'jlid5nji0nmoupl87ls85iv8do',
+                            booking_id: '8f9f5145-c40c-4477-8d30-5c43256ddb60',
+                            title: 'm',
+                            description: '',
+                            organizer: {
+                                email: 'johndoe@example.com',
+                                name: '',
+                            },
+                            status: 'booked',
+                        },
+                    }),
+                });
+            }
+            return fetch(url);
+        });
+        let nylasScheduling;
+        const page = await newSpecPage({
+            components: [NylasSelectedEventCard, NylasBookingForm, NylasScheduling],
+            template: () => (h("nylas-scheduling", { mode: "app", configurationId: '19ca4a10-be05-4d1b-a830-5b639a362cef', bookingInfo: defaultSchedulerState.bookingInfo, defaultSchedulerState: defaultSchedulerState })),
+        });
+        nylasScheduling = page.rootInstance;
+        const redirectSpy = jest.spyOn(nylasScheduling, 'redirectToCustomUrl');
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+        const nylasBookingForm = page?.root?.shadowRoot?.querySelector('nylas-booking-form');
+        nylasBookingForm.bookingInfo = defaultSchedulerState.bookingInfo;
+        await page.waitForChanges();
+        const form = nylasBookingForm?.shadowRoot?.querySelector('form');
+        expect(form).not.toBeNull();
+        const detailsConfirmedEvent = new CustomEvent('detailsConfirmed', {
+            detail: {
+                additionalFields: { dropdown: 'option 2', short_text: 'hello' },
+                guests: [],
+                start_time: new Date(1729013400000),
+                timezone: 'America/Toronto',
+                email_language: 'en-US',
+                end_time: new Date(1729015200000),
+                timeslot: {
+                    start_time: new Date(1729013400000),
+                    end_time: new Date(1729015200000),
+                },
+                primaryParticipant: { name: 'John Doe', email: 'johndoe@example.com' },
+            },
+            bubbles: true,
+        });
+        await nylasScheduling.bookButtonClickedHandler(detailsConfirmedEvent);
+        await page.waitForChanges();
+        expect(redirectSpy).toHaveBeenCalled();
+        expect(redirectSpy).toHaveBeenCalledWith('https://nylas.com?booking_id=8f9f5145-c40c-4477-8d30-5c43256ddb60&name=John+Doe&email=johndoe%40example.com&start_time=1728637.2&end_time=1728639&tz=America%2FLos_Angeles&additional_values=%7B%22dropdown%22%3A%22option+2%22%2C%22short_text%22%3A%22hello%22%2C%22field2%22%3A%22some+value%22%7D&config_id=19ca4a10-be05-4d1b-a830-5b639a362cef');
+    });
 });
 //# sourceMappingURL=nylas-scheduling.spec.js.map

package/dist/collection/components/scheduler/nylas-scheduling/test/nylas-scheduling.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-scheduling.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-scheduling/test/nylas-scheduling.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasScheduling } from '../nylas-scheduling';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-scheduling', () => {\n  const REAL_DATE = Date;\n  const testBookingRef = 'Of_H8WLEQ4aZTtx0NKajeAF1l9qpekHbo4by7AaZc8M=';\n  beforeEach(() => {\n    // Clear and reset the mock before each test if needed\n    jest.clearAllMocks();\n  });\n\n  beforeAll(() => {\n    const originalDate = Date;\n    global.Date = class extends originalDate {\n      constructor(date?: string | number) {\n        super(date ? date : '2022-01-01T00:00:00.000Z');\n      }\n    } as DateConstructor;\n  });\n\n  afterAll(() => {\n    global.Date = REAL_DATE;\n  });\n\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling></nylas-scheduling>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it('listens for NylasSchedulingError event and updates state', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling></nylas-scheduling>`,\n    });\n\n    const mockError = { title: 'Error', description: 'Test Error', type: 'error', category: 'component', ttl: 'none' };\n    const errorEvent = new CustomEvent('NylasSchedulingError', { detail: mockError, bubbles: true });\n    page.win.dispatchEvent(errorEvent);\n    await page.waitForChanges();\n\n    const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n    expect(notification).not.toBeNull();\n    const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n    expect(notifRoot).not.toBeNull();\n  });\n\n  it('shows no error when configID is set, and no sessionID is set', async () => {\n    const availability = [\n      {\n        emails: ['xyz@gmail.com'],\n        end_time: new Date(1709303400000),\n        start_time: new Date(1709301600000),\n      },\n    ];\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      template: () => (\n        <nylas-scheduling\n          config-id=\"configid\"\n          defaultSchedulerState={{\n            availability,\n          }}\n        ></nylas-scheduling>\n      ),\n    });\n\n    await page.waitForChanges();\n\n    const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n    const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n    expect(notifRoot).toBeUndefined();\n  });\n\n  it('listens for dateSelected event and updates date label', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling></nylas-scheduling>`,\n    });\n\n    const selectedDate = new Date();\n    const dateSelectedEvent = new CustomEvent('dateSelected', { detail: selectedDate, bubbles: true });\n    page.win.dispatchEvent(dateSelectedEvent);\n    await page.waitForChanges();\n\n    const selectedDateLabel = page?.root?.shadowRoot?.querySelector('#selectedDate');\n    expect(selectedDateLabel?.textContent).toBe('No date selected');\n  });\n\n  it('conditionally renders cancel flow based on cancelBookingRef prop', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling cancel-booking-ref=${testBookingRef}></nylas-scheduling>`,\n    });\n\n    await page.waitForChanges();\n    const cancelFlowPage = page?.root?.shadowRoot?.querySelector('.cancel-flow-page');\n    expect(cancelFlowPage).not.toBeNull();\n  });\n\n  it('renders composable UI when mode is set to composable', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling mode=\"composable\">\n      <nylas-if-state state=\"scheduler.eventInfo\" is-state-set=\"false\">\n      <div class=\"flex\">\n        <div class=\"flex flex-col gap-4 px-6 pt-4 h-[514px] w-[433px] border-slate-200 dark:border-slate-700 border-r\">\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\">\n            <nylas-date-picker></nylas-date-picker>\n            <div class=\"border-slate-200 dark:border-slate-700 border-t -mx-6 h-px\"></div>\n            <nylas-locale-switch></nylas-locale-switch>\n          </nylas-if-state>\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\">\n            <div class=\"flex flex-col justify-center h-[496px]\">\n              <nylas-selected-event-card></nylas-selected-event-card>\n            </div>\n          </nylas-if-state>\n        </div>\n        <div class=\"flex flex-col items-center min-w-[360px] overflow-hidden bg-slate-50 dark:bg-slate-700\">\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\" class=\"w-full\">\n            <div class=\"flex flex-col justify-start w-full\">\n              <nylas-if-state state=\"scheduler.selectableDates\" is-state-set=\"true\">\n                <h2 class=\"flex items-center justify-center text-lg font-semibold w-full text-center gap-1 mb-4 mt-6 text-slate-700 dark:text-white\">\n                  <calendar-icon></calendar-icon>\n                  <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"false\">\n                    <span>No date selected</span>\n                  </nylas-if-state>\n                  <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"true\">\n                    <span id=\"selectedDate\"></span>\n                  </nylas-if-state>\n                </h2>\n              </nylas-if-state>\n              <nylas-timeslot-picker></nylas-timeslot-picker>\n            </div>\n          </nylas-if-state>\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\" class=\"w-full\">\n            <div class=\"flex flex-col justify-center h-[496px]\">\n              <nylas-booking-form></nylas-booking-form>\n            </div>\n          </nylas-if-state>\n        </div>\n      </div>\n    </nylas-if-state>\n      </nylas-scheduling>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it('exposes getNylasSchedulingStore method and returns store', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n    });\n    const scheduler = page.rootInstance as NylasScheduling;\n\n    const store = await scheduler.getNylasSchedulerStore();\n    expect(store).toBeDefined();\n  });\n\n  it('exposes getNylasSchedulingConnector method and returns connector', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n    });\n    const scheduler = page.rootInstance as NylasScheduling;\n\n    const connector = await scheduler.getNylasSchedulerConnector();\n    expect(connector).toBeDefined();\n  });\n\n  it('should render the reschedule flow when rescheduleBookingRef is set', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling reschedule-booking-ref=${testBookingRef}></nylas-scheduling>`,\n    });\n\n    await page.waitForChanges();\n\n    const messageBanner = page?.root?.shadowRoot?.querySelector('.message-banner');\n    expect(messageBanner).not.toBeNull();\n  });\n\n  it('hides the nylas logo in the footer if nylasBranding is set', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      template: () => <nylas-scheduling config-id=\"configid\" nylasBranding={false}></nylas-scheduling>,\n    });\n\n    await page.waitForChanges();\n\n    const footer = page?.root?.shadowRoot?.querySelector('.footer');\n    expect(footer?.textContent).not.toContain('Powered by Nylas');\n  });\n});\n"]}
+{"version":3,"file":"nylas-scheduling.spec.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-scheduling/test/nylas-scheduling.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { NylasScheduling } from '../nylas-scheduling';\nimport { NylasBookingForm } from '../../nylas-booking-form/nylas-booking-form';\nimport { NylasSelectedEventCard } from '../../nylas-selected-event-card/nylas-selected-event-card';\nimport { h } from '@stencil/core';\n\ndescribe('nylas-scheduling', () => {\n  const REAL_DATE = Date;\n  const testBookingRef = 'Of_H8WLEQ4aZTtx0NKajeAF1l9qpekHbo4by7AaZc8M=';\n  beforeEach(() => {\n    // Clear and reset the mock before each test if needed\n    jest.clearAllMocks();\n  });\n\n  beforeAll(() => {\n    const originalDate = Date;\n    global.Date = class extends originalDate {\n      constructor(date?: string | number) {\n        super(date ? date : '2022-01-01T00:00:00.000Z');\n      }\n    } as DateConstructor;\n  });\n\n  afterAll(() => {\n    global.Date = REAL_DATE;\n  });\n\n  it('renders', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling></nylas-scheduling>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it('listens for NylasSchedulingError event and updates state', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling></nylas-scheduling>`,\n    });\n\n    const mockError = { title: 'Error', description: 'Test Error', type: 'error', category: 'component', ttl: 'none' };\n    const errorEvent = new CustomEvent('NylasSchedulingError', { detail: mockError, bubbles: true });\n    page.win.dispatchEvent(errorEvent);\n    await page.waitForChanges();\n\n    const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n    expect(notification).not.toBeNull();\n    const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n    expect(notifRoot).not.toBeNull();\n  });\n\n  it('shows no error when configID is set, and no sessionID is set', async () => {\n    const availability = [\n      {\n        emails: ['xyz@gmail.com'],\n        end_time: new Date(1709303400000),\n        start_time: new Date(1709301600000),\n      },\n    ];\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      template: () => (\n        <nylas-scheduling\n          config-id=\"configid\"\n          defaultSchedulerState={{\n            availability,\n          }}\n        ></nylas-scheduling>\n      ),\n    });\n\n    await page.waitForChanges();\n\n    const notification = page?.root?.shadowRoot?.querySelector('nylas-notification');\n    const notifRoot = notification?.shadowRoot?.querySelector('.notif');\n    expect(notifRoot).toBeUndefined();\n  });\n\n  it('listens for dateSelected event and updates date label', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling></nylas-scheduling>`,\n    });\n\n    const selectedDate = new Date();\n    const dateSelectedEvent = new CustomEvent('dateSelected', { detail: selectedDate, bubbles: true });\n    page.win.dispatchEvent(dateSelectedEvent);\n    await page.waitForChanges();\n\n    const selectedDateLabel = page?.root?.shadowRoot?.querySelector('#selectedDate');\n    expect(selectedDateLabel?.textContent).toBe('No date selected');\n  });\n\n  it('conditionally renders cancel flow based on cancelBookingRef prop', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling cancel-booking-ref=${testBookingRef}></nylas-scheduling>`,\n    });\n\n    await page.waitForChanges();\n    const cancelFlowPage = page?.root?.shadowRoot?.querySelector('.cancel-flow-page');\n    expect(cancelFlowPage).not.toBeNull();\n  });\n\n  it('renders composable UI when mode is set to composable', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling mode=\"composable\">\n      <nylas-if-state state=\"scheduler.eventInfo\" is-state-set=\"false\">\n      <div class=\"flex\">\n        <div class=\"flex flex-col gap-4 px-6 pt-4 h-[514px] w-[433px] border-slate-200 dark:border-slate-700 border-r\">\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\">\n            <nylas-date-picker></nylas-date-picker>\n            <div class=\"border-slate-200 dark:border-slate-700 border-t -mx-6 h-px\"></div>\n            <nylas-locale-switch></nylas-locale-switch>\n          </nylas-if-state>\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\">\n            <div class=\"flex flex-col justify-center h-[496px]\">\n              <nylas-selected-event-card></nylas-selected-event-card>\n            </div>\n          </nylas-if-state>\n        </div>\n        <div class=\"flex flex-col items-center min-w-[360px] overflow-hidden bg-slate-50 dark:bg-slate-700\">\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"false\" class=\"w-full\">\n            <div class=\"flex flex-col justify-start w-full\">\n              <nylas-if-state state=\"scheduler.selectableDates\" is-state-set=\"true\">\n                <h2 class=\"flex items-center justify-center text-lg font-semibold w-full text-center gap-1 mb-4 mt-6 text-slate-700 dark:text-white\">\n                  <calendar-icon></calendar-icon>\n                  <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"false\">\n                    <span>No date selected</span>\n                  </nylas-if-state>\n                  <nylas-if-state state=\"scheduler.selectedDate\" is-state-set=\"true\">\n                    <span id=\"selectedDate\"></span>\n                  </nylas-if-state>\n                </h2>\n              </nylas-if-state>\n              <nylas-timeslot-picker></nylas-timeslot-picker>\n            </div>\n          </nylas-if-state>\n          <nylas-if-state state=\"scheduler.showBookingForm\" is-boolean=\"true\" class=\"w-full\">\n            <div class=\"flex flex-col justify-center h-[496px]\">\n              <nylas-booking-form></nylas-booking-form>\n            </div>\n          </nylas-if-state>\n        </div>\n      </div>\n    </nylas-if-state>\n      </nylas-scheduling>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it('exposes getNylasSchedulingStore method and returns store', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n    });\n    const scheduler = page.rootInstance as NylasScheduling;\n\n    const store = await scheduler.getNylasSchedulerStore();\n    expect(store).toBeDefined();\n  });\n\n  it('exposes getNylasSchedulingConnector method and returns connector', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling session-id=\"sessionid\"></nylas-scheduling>`,\n    });\n    const scheduler = page.rootInstance as NylasScheduling;\n\n    const connector = await scheduler.getNylasSchedulerConnector();\n    expect(connector).toBeDefined();\n  });\n\n  it('should render the reschedule flow when rescheduleBookingRef is set', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      html: `<nylas-scheduling reschedule-booking-ref=${testBookingRef}></nylas-scheduling>`,\n    });\n\n    await page.waitForChanges();\n\n    const messageBanner = page?.root?.shadowRoot?.querySelector('.message-banner');\n    expect(messageBanner).not.toBeNull();\n  });\n\n  it('hides the nylas logo in the footer if nylasBranding is set', async () => {\n    const page = await newSpecPage({\n      components: [NylasScheduling],\n      template: () => <nylas-scheduling config-id=\"configid\" nylasBranding={false}></nylas-scheduling>,\n    });\n\n    await page.waitForChanges();\n\n    const footer = page?.root?.shadowRoot?.querySelector('.footer');\n    expect(footer?.textContent).not.toContain('Powered by Nylas');\n  });\n\n  it('redirects with the query params when redirectUrl is set', async () => {\n    const configSettings = {\n      name: '',\n      slug: '',\n      configuration_id: '19ca4a10-be05-4d1b-a830-5b639a362cef',\n      scheduler: {\n        available_days_in_future: 30,\n        min_cancellation_notice: 0,\n        min_booking_notice: 60,\n        rescheduling_url: 'https://book.nylas.com/scheduler/reschedule/:booking_ref',\n        cancellation_url: 'https://book.nylas.com/scheduler/cancel/:booking_ref',\n        organizer_confirmation_url: 'https://book.nylas.com/scheduler/confirm/:booking_ref',\n        confirmation_redirect_url: 'https://nylas.com',\n        hide_rescheduling_options: false,\n        hide_cancellation_options: false,\n        hide_additional_guests: false,\n        cancellation_policy: '',\n        additional_fields: {\n          dropdown: {\n            label: 'Dropdown Label',\n            type: 'dropdown',\n            required: false,\n            order: 2,\n            options: ['option 1', 'option 2'],\n          },\n          short_text: {\n            label: 'Short Text Label',\n            type: 'text',\n            required: false,\n            order: 1,\n          },\n        },\n      },\n      organizer: {\n        email: 'pooja.g@nylas.com',\n        name: '',\n      },\n      booking_type: 'booking',\n      appearance: {\n        company_logo_url: '',\n      },\n    };\n    const defaultSchedulerState = {\n      showBookingForm: true,\n      availability: [\n        {\n          emails: ['pooja.g@nylas.com'],\n          end_time: 1728639000 as any,\n          start_time: 1728637200 as any,\n        },\n      ],\n      selectableDates: [new Date(1728639000000)],\n      selectedDate: new Date(1728639000000),\n      selectedTimeslot: {\n        end_time: 1728639000 as any,\n        start_time: 1728637200 as any,\n        emails: ['janedoe@example.com'],\n      },\n      selectedTimezone: 'America/Los_Angeles',\n      bookingInfo: {\n        primaryParticipant: {\n          name: 'John Doe',\n          email: 'johndoe@example.com',\n        },\n        guests: [],\n        additionalFields: {\n          short_text: {\n            value: 'some value',\n            type: 'text',\n          },\n          dropdown: {\n            value: 'option 2',\n            type: 'dropdown',\n          },\n          field2: {\n            value: 'some value',\n            type: 'text',\n          },\n        },\n      },\n      configSettings: { ...configSettings },\n    };\n    jest.spyOn(global, 'fetch').mockImplementation(url => {\n      if (url === 'https://api.us.nylas.com/v3/scheduling/ui-settings?configuration_id=19ca4a10-be05-4d1b-a830-5b639a362cef') {\n        return Promise.resolve({ request_id: 'test', data: configSettings } as any);\n      } else if (url === 'https://api.us.nylas.com/v3/scheduling/bookings?configuration_id=19ca4a10-be05-4d1b-a830-5b639a362cef') {\n        return Promise.resolve({\n          json: () =>\n            Promise.resolve({\n              request_id: '1729109187-ffa7e86e-c276-45c2-8cda-e3205e46d234',\n              data: {\n                event_id: 'jlid5nji0nmoupl87ls85iv8do',\n                booking_id: '8f9f5145-c40c-4477-8d30-5c43256ddb60',\n                title: 'm',\n                description: '',\n                organizer: {\n                  email: 'johndoe@example.com',\n                  name: '',\n                },\n                status: 'booked',\n              },\n            } as any),\n        } as Response);\n      }\n\n      return fetch(url); // Fallback for unmocked URLs\n    });\n    let nylasScheduling: NylasScheduling;\n    const page = await newSpecPage({\n      components: [NylasSelectedEventCard, NylasBookingForm, NylasScheduling],\n      template: () => (\n        <nylas-scheduling\n          mode=\"app\"\n          configurationId={'19ca4a10-be05-4d1b-a830-5b639a362cef'}\n          bookingInfo={defaultSchedulerState.bookingInfo}\n          defaultSchedulerState={defaultSchedulerState}\n        ></nylas-scheduling>\n      ),\n    });\n    nylasScheduling = page.rootInstance as NylasScheduling;\n    const redirectSpy = jest.spyOn(nylasScheduling, 'redirectToCustomUrl');\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot();\n    const nylasBookingForm = page?.root?.shadowRoot?.querySelector('nylas-booking-form') as HTMLNylasBookingFormElement;\n    nylasBookingForm.bookingInfo = defaultSchedulerState.bookingInfo;\n    await page.waitForChanges();\n    const form = nylasBookingForm?.shadowRoot?.querySelector('form');\n    expect(form).not.toBeNull();\n\n    const detailsConfirmedEvent = new CustomEvent('detailsConfirmed', {\n      detail: {\n        additionalFields: { dropdown: 'option 2', short_text: 'hello' },\n        guests: [],\n        start_time: new Date(1729013400000),\n        timezone: 'America/Toronto',\n        email_language: 'en-US',\n        end_time: new Date(1729015200000),\n        timeslot: {\n          start_time: new Date(1729013400000),\n          end_time: new Date(1729015200000),\n        },\n        primaryParticipant: { name: 'John Doe', email: 'johndoe@example.com' },\n      },\n      bubbles: true,\n    });\n\n    await nylasScheduling.bookButtonClickedHandler(detailsConfirmedEvent);\n    await page.waitForChanges();\n    expect(redirectSpy).toHaveBeenCalled();\n    // Assert that the redirect happened with the correct URL (includes field_2 in the additional_values)\n    expect(redirectSpy).toHaveBeenCalledWith(\n      'https://nylas.com?booking_id=8f9f5145-c40c-4477-8d30-5c43256ddb60&name=John+Doe&email=johndoe%40example.com&start_time=1728637.2&end_time=1728639&tz=America%2FLos_Angeles&additional_values=%7B%22dropdown%22%3A%22option+2%22%2C%22short_text%22%3A%22hello%22%2C%22field2%22%3A%22some+value%22%7D&config_id=19ca4a10-be05-4d1b-a830-5b639a362cef',\n    );\n  });\n});\n"]}

package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.css

@@ -1,4 +1,27 @@
 :host {
+  --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;
   display: block;
   position: relative;
   height: inherit;

package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js

@@ -47,9 +47,9 @@ export class NylasSelectedEventCard {
         this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time));
     }
     render() {
-        return (h(Host, { key: '2b4257d6793fd263e7978504b88e270d77e2e78f', part: "nsec" }, h("div", { key: '8eb84c0c375afd9824d88337003d09b7fe3db171', class: "event-card", part: "nsec__card" }, h("div", { key: 'bc7d364f1ec772f06f5eab4549b0433cb947f68d', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: 'a3f38777fea8b17714ad0dc34cd236a93e4360fd' })), h("div", { key: '1d23698c5a8d627bc10c7969e269a381584b6477', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
+        return (h(Host, { key: '988d5270aa9dbd656c11d70ae0f3058dd25b4eb8', part: "nsec" }, h("div", { key: '21681211baf07faa5b09cec29611859a8dbdd37b', class: "event-card", part: "nsec__card" }, h("div", { key: '9b478bc27a5469a7c67786e3b1958e20e2f59d9e', class: "calendar-icon", part: "nsec__icon" }, h("calendar-icon", { key: '9a9f4cd2551747874876d8a32943a8cd98032d1e' })), h("div", { key: 'f9dcde6ca9cffbfeb2f5dcd4e3586433bf2fd055', class: "nylas-selected-event-card__date", part: "nsec__date" }, this.selectedDate
             ? capitalizeFirstLetter(this.selectedDate?.toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage || navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }))
-            : '-'), h("div", { key: '4e02d04cc6918076935614be321619a9df16430d', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: 'ad39ae7e3df5e6652b0dad88b98695cfee00e3db', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '23b1e1fd15842a65278a969e1ce3aea0313ea46e' }), TIMEZONE_MAP[this.selectedTimezone])));
+            : '-'), h("div", { key: 'a6151b6f505de22f748fcd959c5aa04721a4dd52', class: "nylas-selected-event-card__time", part: "nsec__time" }, this.startTime, " - ", this.endTime)), h("div", { key: '9190417c554a5e960841a8e132f3995574da14be', class: "event-timezone", part: "nsec__timezone" }, h("globe-icon", { key: '16f199ce28c18cc975bd8ade52f6b4fccfbe4455' }), TIMEZONE_MAP[this.selectedTimezone])));
     }
     static get is() { return "nylas-selected-event-card"; }
     static get encapsulation() { return "shadow"; }
@@ -118,7 +118,7 @@ export class NylasSelectedEventCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "*\nThe selected timezone."
+                    "text": "The selected timezone."
                 },
                 "attribute": "selected-timezone",
                 "reflect": false,

package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-selected-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { Timeslot } from '@nylas/core';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\n\n/**\n * The `nylas-selected-event-card` component is a UI component that displays the selected event card.\n *\n * @part nsec - The selected event card component.\n * @part nsec__card - The card component.\n * @part nsec__icon - The calendar icon.\n * @part nsec__date - The date selected.\n * @part nsec__time - The timeslot selected.\n * @part nsec__timezone - The timezone selected.\n */\n@Component({\n  tag: 'nylas-selected-event-card',\n  styleUrl: 'nylas-selected-event-card.scss',\n  shadow: true,\n})\nexport class NylasSelectedEventCard {\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date;\n\n  /**\n   * The selected time.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n\n  /***\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: string;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-selected-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-selected-event-card] Component did load`);\n    if (!this.selectedDate) {\n      console.warn('[nylas-selected-event-card] \"selectedDate\" prop is not provided.');\n    }\n    if (!this.selectedTimeslot) {\n      console.warn('[nylas-selected-event-card] \"selectedTimeslot\" prop is not provided.');\n    }\n    const timeFormat = new Intl.DateTimeFormat('en-US', {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n    });\n\n    this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time as Date));\n    this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time as Date));\n  }\n\n  @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-selected-event-card',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nsec\">\n        <div class=\"event-card\" part=\"nsec__card\">\n          <div class=\"calendar-icon\" part=\"nsec__icon\">\n            <calendar-icon />\n          </div>\n          <div class=\"nylas-selected-event-card__date\" part=\"nsec__date\">\n            {this.selectedDate\n              ? capitalizeFirstLetter(\n                  this.selectedDate?.toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage || navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }),\n                )\n              : '-'}\n          </div>\n          <div class=\"nylas-selected-event-card__time\" part=\"nsec__time\">\n            {this.startTime} - {this.endTime}\n          </div>\n        </div>\n        <div class=\"event-timezone\" part=\"nsec__timezone\">\n          <globe-icon></globe-icon>\n          {TIMEZONE_MAP[this.selectedTimezone]}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-selected-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, h, Host, Prop, State } from '@stencil/core';\nimport type { NylasSchedulerConnector } from '../../..';\nimport type { Timeslot } from '@nylas/core';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug } from '@/utils/utils';\nimport { LANGUAGE_CODE_MAP, TIMEZONE_MAP } from '@/common/constants';\n\n/**\n * The `nylas-selected-event-card` component is a UI component that displays the selected event card.\n *\n * @part nsec - The selected event card component.\n * @part nsec__card - The card component.\n * @part nsec__icon - The calendar icon.\n * @part nsec__date - The date selected.\n * @part nsec__time - The timeslot selected.\n * @part nsec__timezone - The timezone selected.\n */\n@Component({\n  tag: 'nylas-selected-event-card',\n  styleUrl: 'nylas-selected-event-card.scss',\n  shadow: true,\n})\nexport class NylasSelectedEventCard {\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date;\n\n  /**\n   * The selected time.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage?: string;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-selected-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-selected-event-card] Component did load`);\n    if (!this.selectedDate) {\n      console.warn('[nylas-selected-event-card] \"selectedDate\" prop is not provided.');\n    }\n    if (!this.selectedTimeslot) {\n      console.warn('[nylas-selected-event-card] \"selectedTimeslot\" prop is not provided.');\n    }\n    const timeFormat = new Intl.DateTimeFormat('en-US', {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n    });\n\n    this.startTime = timeFormat.format(new Date(this.selectedTimeslot?.start_time as Date));\n    this.endTime = timeFormat.format(new Date(this.selectedTimeslot?.end_time as Date));\n  }\n\n  @RegisterComponent<NylasSelectedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-selected-event-card',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nsec\">\n        <div class=\"event-card\" part=\"nsec__card\">\n          <div class=\"calendar-icon\" part=\"nsec__icon\">\n            <calendar-icon />\n          </div>\n          <div class=\"nylas-selected-event-card__date\" part=\"nsec__date\">\n            {this.selectedDate\n              ? capitalizeFirstLetter(\n                  this.selectedDate?.toLocaleDateString(LANGUAGE_CODE_MAP[this.selectedLanguage || navigator.language], { dateStyle: 'full', timeZone: this.selectedTimezone }),\n                )\n              : '-'}\n          </div>\n          <div class=\"nylas-selected-event-card__time\" part=\"nsec__time\">\n            {this.startTime} - {this.endTime}\n          </div>\n        </div>\n        <div class=\"event-timezone\" part=\"nsec__timezone\">\n          <globe-icon></globe-icon>\n          {TIMEZONE_MAP[this.selectedTimezone]}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.css

@@ -1,6 +1,29 @@
 :host {
   display: block;
   height: calc(100% - 48px);
+  --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;
 }
 
 .time-picker-wrapper {

package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js

@@ -29,11 +29,11 @@ export class NylasTimeslotPicker {
         this.handleMouseLeave = () => {
             this.hoveredTimeslotIndex = -1;
         };
-        this.selectedDate = new Date();
         this.availability = undefined;
-        this.selectedTimeslot = undefined;
         this.isLoading = undefined;
+        this.selectedTimeslot = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.selectedDate = new Date();
         this.selectedLanguage = undefined;
         this.times = [];
         this.hoveredTimeslotIndex = undefined;
@@ -122,27 +122,6 @@ export class NylasTimeslotPicker {
     }
     static get properties() {
         return {
-            "selectedDate": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "Date",
-                    "resolved": "Date | undefined",
-                    "references": {
-                        "Date": {
-                            "location": "global",
-                            "id": "global::Date"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The selected date."
-                },
-                "defaultValue": "new Date()"
-            },
             "availability": {
                 "type": "unknown",
                 "mutable": false,
@@ -160,10 +139,33 @@ export class NylasTimeslotPicker {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "The available timeslots."
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The available timeslots."
+                        }],
+                    "text": ""
                 }
             },
+            "isLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "standalone",
+                            "text": "The loading state prop. Used to display loading state when fetching availability."
+                        }],
+                    "text": ""
+                },
+                "attribute": "loading-state",
+                "reflect": false
+            },
             "selectedTimeslot": {
                 "type": "unknown",
                 "mutable": false,
@@ -185,23 +187,6 @@ export class NylasTimeslotPicker {
                     "text": "The selected timeslot."
                 }
             },
-            "isLoading": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean | undefined",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The loading state prop. Used to display loading state when fetching availability."
-                },
-                "attribute": "loading-state",
-                "reflect": false
-            },
             "selectedTimezone": {
                 "type": "string",
                 "mutable": false,
@@ -220,6 +205,27 @@ export class NylasTimeslotPicker {
                 "reflect": false,
                 "defaultValue": "Intl.DateTimeFormat().resolvedOptions().timeZone"
             },
+            "selectedDate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Date",
+                    "resolved": "Date | undefined",
+                    "references": {
+                        "Date": {
+                            "location": "global",
+                            "id": "global::Date"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date."
+                },
+                "defaultValue": "new Date()"
+            },
             "selectedLanguage": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-timeslot-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n *\n * @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n */\n@Component({\n  tag: 'nylas-timeslot-picker',\n  styleUrl: 'nylas-timeslot-picker.scss',\n  shadow: true,\n})\nexport class NylasTimeslotPicker {\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n  /**\n   * The available timeslots.\n   */\n  @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n  /**\n   * The selected timeslot.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /**\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: string;\n\n  /**\n   * This event is fired when a timeslot is selected.\n   */\n  @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n  /**\n   * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n   */\n  @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n  @State() times: AvailabilityTimeslot[] = [];\n  @State() hoveredTimeslotIndex?: number;\n  @State() selectedTimeslotIndex?: string;\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: string) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newVal: Date | null | undefined) {\n    debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n    if (newVal) {\n      this.selectedTimeslotIndex = '';\n      if (typeof newVal !== 'undefined') {\n        const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n        this.times = availableTimes || [];\n      }\n    }\n  }\n\n  @Watch('availability')\n  availabilityChanged(newVal: AvailabilityTimeslot[] | undefined) {\n    debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n    if (typeof newVal !== 'undefined') {\n      const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n      this.times = availableTimes || [];\n    }\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n    this.times = availableTimes || [];\n    debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-timeslot-picker] Component did load`);\n  }\n\n  private getTimeslotId(date: Date, index: number) {\n    return `${date.toLocaleDateString()}-${index}`;\n  }\n\n  private onClickSelectTime(timeslot: Timeslot, index: number) {\n    debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n    this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n    this.timeslotSelected.emit({\n      start_time: timeslot.start_time,\n      end_time: timeslot.end_time,\n      emails: timeslot.emails,\n    });\n  }\n\n  private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot | undefined) => {\n    event.preventDefault();\n    debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n    this.timeslotConfirmed.emit(timeslot);\n  };\n\n  private handleMouseEnter = (index: number) => {\n    this.hoveredTimeslotIndex = index;\n  };\n\n  private handleMouseLeave = () => {\n    this.hoveredTimeslotIndex = -1;\n  };\n\n  private getTimeSlotLabel(timeslot: Timeslot) {\n    const timeFormat = new Intl.DateTimeFormat('en-US', {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n    });\n    return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n  }\n\n  @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-timeslot-picker',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.availability', 'availability'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.isLoading', 'isLoading'],\n    ]),\n    eventToProps: {\n      timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectTime(event.detail);\n      },\n      timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n        if (event.detail) {\n          nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    if (this.isLoading) {\n      return (\n        <Host>\n          <div class={'loading'}>\n            {new Array(6).fill(0).map((_, i) => (\n              <div class={'timeslot-skeleton'} style={{ animationDelay: `${i * 20}ms` }} />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.availability && this.availability.length === 0) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No dates available</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if ((!this.times || this.times.length === 0) && !!this.selectedDate) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No time slots available for selected date</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if (!this.selectedDate) return <Host></Host>;\n\n    return (\n      <Host part=\"ntp\">\n        <div class={'time-picker-wrapper'}>\n          <div class={'timeslots'}>\n            {this.times.map((timeslot, index) => (\n              <button\n                part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n                aria-role=\"button\"\n                class={{\n                  time: true,\n                  selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n                }}\n                onClick={() => this.onClickSelectTime(timeslot, index)}\n                onMouseEnter={() => this.handleMouseEnter(index)}\n                onMouseLeave={() => this.handleMouseLeave()}\n              >\n                {this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n                  ? this.getTimeSlotLabel(timeslot)\n                  : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n              </button>\n            ))}\n          </div>\n          {this.selectedTimeslot && (\n            <div class={'footer'}>\n              <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n                <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n              </button-component>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-timeslot-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { debug, isSameDay } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { AvailabilityTimeslot } from '@/stores/scheduler-store';\nimport type { Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n\n/**\n * The `nylas-timeslot-picker` component is a UI component that allows users to select a timeslot from a list of available timeslots.\n *\n * @slot timeslot-picker-cta-label - The label for the timeslot picker CTA. Default is \"Next\".\n * @part ntp - The timeslot picker component.\n * @part ntp__timeslot - The timeslot button.\n * @part ntp__timeslot--selected - The selected timeslot button.\n * @part ntp__button-primary - The timeslot picker CTA.\n */\n@Component({\n  tag: 'nylas-timeslot-picker',\n  styleUrl: 'nylas-timeslot-picker.scss',\n  shadow: true,\n})\nexport class NylasTimeslotPicker {\n  /**\n   * @standalone\n   * The available timeslots.\n   */\n  @Prop({ attribute: 'availability' }) readonly availability?: AvailabilityTimeslot[];\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop({ attribute: 'loading-state' }) readonly isLoading?: boolean;\n  /**\n   * The selected timeslot.\n   */\n  @Prop({ attribute: 'selected-timeslot' }) readonly selectedTimeslot?: Timeslot;\n  /**\n   * The selected timezone.\n   */\n  @Prop({ attribute: 'selected-timezone' }) readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  /**\n   * The selected date.\n   */\n  @Prop({ attribute: 'selected-date' }) readonly selectedDate?: Date = new Date();\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: string;\n\n  /**\n   * This event is fired when a timeslot is selected.\n   */\n  @Event() readonly timeslotSelected!: EventEmitter<Timeslot>;\n  /**\n   * This event is fired when a timeslot is confirmed. By default, this will proceed to the booking form page.\n   */\n  @Event() readonly timeslotConfirmed!: EventEmitter<Timeslot>;\n\n  @State() times: AvailabilityTimeslot[] = [];\n  @State() hoveredTimeslotIndex?: number;\n  @State() selectedTimeslotIndex?: string;\n\n  @Watch('selectedLanguage')\n  selectedLanguageChanged(newLanguage: string) {\n    i18next.changeLanguage(newLanguage);\n  }\n\n  @Watch('selectedDate')\n  selectedDateChanged(newVal: Date | null | undefined) {\n    debug(`[nylas-timeslot-picker] Selected date changed`, { newVal });\n\n    if (newVal) {\n      this.selectedTimeslotIndex = '';\n      if (typeof newVal !== 'undefined') {\n        const availableTimes = this.availability?.filter(timeslot => isSameDay(timeslot.start_time, newVal)).map(timeslot => timeslot);\n        this.times = availableTimes || [];\n      }\n    }\n  }\n\n  @Watch('availability')\n  availabilityChanged(newVal: AvailabilityTimeslot[] | undefined) {\n    debug(`[nylas-timeslot-picker] Available times changed`, { newVal, selectedDate: this.selectedDate });\n\n    if (typeof newVal !== 'undefined') {\n      const availableTimes = newVal?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n      this.times = availableTimes || [];\n    }\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    const availableTimes = this.availability?.filter(timeslot => this.selectedDate && isSameDay(timeslot.start_time, this.selectedDate)).map(timeslot => timeslot);\n    this.times = availableTimes || [];\n    debug(`[nylas-timeslot-picker] Component will load`, { selectedDate: this.selectedDate, availability: this.availability, times: this.times });\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-timeslot-picker] Component did load`);\n  }\n\n  private getTimeslotId(date: Date, index: number) {\n    return `${date.toLocaleDateString()}-${index}`;\n  }\n\n  private onClickSelectTime(timeslot: Timeslot, index: number) {\n    debug(`[nylas-timeslot-picker] Time selected`, timeslot, index);\n    this.selectedTimeslotIndex = this.getTimeslotId(timeslot.start_time, index);\n    this.timeslotSelected.emit({\n      start_time: timeslot.start_time,\n      end_time: timeslot.end_time,\n      emails: timeslot.emails,\n    });\n  }\n\n  private handleConfirmedTimeslot = async (event: Event, timeslot: Timeslot | undefined) => {\n    event.preventDefault();\n    debug(`[nylas-timeslot-picker] Confirm timeslot`, timeslot);\n    this.timeslotConfirmed.emit(timeslot);\n  };\n\n  private handleMouseEnter = (index: number) => {\n    this.hoveredTimeslotIndex = index;\n  };\n\n  private handleMouseLeave = () => {\n    this.hoveredTimeslotIndex = -1;\n  };\n\n  private getTimeSlotLabel(timeslot: Timeslot) {\n    const timeFormat = new Intl.DateTimeFormat('en-US', {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n    });\n    return `${timeFormat.format(timeslot.start_time)} - ${timeFormat.format(timeslot.end_time)}`;\n  }\n\n  @RegisterComponent<NylasTimeslotPicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-timeslot-picker',\n    stateToProps: new Map([\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.availability', 'availability'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.isLoading', 'isLoading'],\n    ]),\n    eventToProps: {\n      timeslotSelected: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotSelected', event.detail);\n        nylasSchedulerConnector.scheduler.selectTime(event.detail);\n      },\n      timeslotConfirmed: async (event: CustomEvent<Timeslot>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-timeslot-picker', 'timeslotConfirmed', event.detail);\n        if (event.detail) {\n          nylasSchedulerConnector.scheduler.toggleAdditionalData(true);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    if (this.isLoading) {\n      return (\n        <Host>\n          <div class={'loading'}>\n            {new Array(6).fill(0).map((_, i) => (\n              <div class={'timeslot-skeleton'} style={{ animationDelay: `${i * 20}ms` }} />\n            ))}\n          </div>\n        </Host>\n      );\n    }\n\n    if (this.availability && this.availability.length === 0) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No dates available</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if ((!this.times || this.times.length === 0) && !!this.selectedDate) {\n      return (\n        <Host>\n          <div class={'empty'}>\n            <span>No time slots available for selected date</span>\n          </div>\n        </Host>\n      );\n    }\n\n    if (!this.selectedDate) return <Host></Host>;\n\n    return (\n      <Host part=\"ntp\">\n        <div class={'time-picker-wrapper'}>\n          <div class={'timeslots'}>\n            {this.times.map((timeslot, index) => (\n              <button\n                part={`ntp__timeslot ${this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime() ? 'ntp__timeslot--selected' : ''}`}\n                aria-role=\"button\"\n                class={{\n                  time: true,\n                  selected: typeof this.selectedTimeslot !== 'undefined' && this.selectedTimeslot?.start_time?.getTime() === timeslot.start_time.getTime(),\n                }}\n                onClick={() => this.onClickSelectTime(timeslot, index)}\n                onMouseEnter={() => this.handleMouseEnter(index)}\n                onMouseLeave={() => this.handleMouseLeave()}\n              >\n                {this.hoveredTimeslotIndex == index || this.selectedTimeslotIndex == this.getTimeslotId(timeslot.start_time, index)\n                  ? this.getTimeSlotLabel(timeslot)\n                  : timeslot.start_time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', timeZone: this.selectedTimezone })}\n              </button>\n            ))}\n          </div>\n          {this.selectedTimeslot && (\n            <div class={'footer'}>\n              <button-component variant={'primary'} onClick={(event: Event) => this.handleConfirmedTimeslot(event, this.selectedTimeslot)} part=\"ntp__button-primary\">\n                <slot name=\"timeslot-picker-cta-label\">{i18next.t('nextButton')}</slot>\n              </button-component>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}