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

package/dist/collection/common/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/common/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Message, NylasErrorResponse } from '@nylas/core';\nimport { EventEmitter } from '@stencil/core';\n\nexport type DataState = 'loading' | 'ready';\n\ntype StoresType = unknown;\ntype StoreInstances = {\n  [K in keyof StoresType]: StoresType[K];\n};\ntype StoreStateKeys<T> = T extends { state: infer S } ? keyof S : never;\n\n/**\n * This type is used to create a union of all possible store state keys.\n * Example:\n * type CombinedStoreStateKeys = \"nylas.messages\" | \"nylasTheme.colour\"\n */\nexport type CombinedStoreStateKeys<SK extends keyof S, S = StoreInstances> = {\n  [StoreKey in SK]: StoreStateKeys<S[StoreKey]> extends never | undefined ? never : `${StoreKey & string}.${StoreStateKeys<S[StoreKey]> & string}`;\n}[SK];\n\nexport type InternalMessage = {\n  id: string;\n  data: Message;\n  collapse: boolean;\n  showContactData: boolean;\n};\n\nexport type InternalAttachment = {\n  blob: Blob;\n  filename: string;\n  contentType: string;\n  size: number;\n  messageId: string;\n};\n\nexport type MethodKeys<T> = {\n  [K in keyof T]: T[K] extends Function ? K : never;\n}[keyof T];\n\n// TODO: Move this to @nylas/core\nexport type AvailabilityTimeslot = {\n  emails: string[];\n  start_time: number;\n  end_time: number;\n};\n\nexport type AvailabilityResponse = {\n  time_slots: AvailabilityTimeslot[];\n  participants: {\n    email: string;\n    name: string;\n  }[];\n  duration: number;\n};\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterKeys<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;\n}[keyof T];\n\n// Extracts the event type from an EventEmitter\nexport type EventEmitterEventType<T> = T extends EventEmitter<infer U> ? U : never;\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterProperties<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<infer U> ? { key: K; eventType: U } : never;\n}[keyof T];\n\nexport type NylasEvent = {\n  booking_id: string;\n  organizer: {\n    email: string;\n    name: string;\n    is_organizer?: boolean;\n  };\n  title: string;\n  description: string;\n  status: string;\n};\n\nexport type DataResponseError = Exclude<NylasErrorResponse['error'], undefined>;\nexport type DataResponseReturnType<T = any> = [T, null] | [null, DataResponseError];\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/common/types.ts"],"names":[],"mappings":"","sourcesContent":["import { Message, NylasErrorResponse } from '@nylas/core';\nimport { EventEmitter } from '@stencil/core';\n\nexport type DataState = 'loading' | 'ready';\n\ntype StoresType = unknown;\ntype StoreInstances = {\n  [K in keyof StoresType]: StoresType[K];\n};\ntype StoreStateKeys<T> = T extends { state: infer S } ? keyof S : never;\n\n/**\n * This type is used to create a union of all possible store state keys.\n * Example:\n * type CombinedStoreStateKeys = \"nylas.messages\" | \"nylasTheme.colour\"\n */\nexport type CombinedStoreStateKeys<SK extends keyof S, S = StoreInstances> = {\n  [StoreKey in SK]: StoreStateKeys<S[StoreKey]> extends never | undefined ? never : `${StoreKey & string}.${StoreStateKeys<S[StoreKey]> & string}`;\n}[SK];\n\nexport type InternalMessage = {\n  id: string;\n  data: Message;\n  collapse: boolean;\n  showContactData: boolean;\n};\n\nexport type InternalAttachment = {\n  blob: Blob;\n  filename: string;\n  contentType: string;\n  size: number;\n  messageId: string;\n};\n\nexport type MethodKeys<T> = {\n  [K in keyof T]: T[K] extends Function ? K : never;\n}[keyof T];\n\n// TODO: Move this to @nylas/core\nexport type AvailabilityTimeslot = {\n  emails: string[];\n  start_time: number;\n  end_time: number;\n};\n\nexport type AvailabilityResponse = {\n  time_slots: AvailabilityTimeslot[];\n  participants: {\n    email: string;\n    name: string;\n  }[];\n  duration: number;\n};\n\nexport type UISettingsResponse = {\n  scheduler: {\n    available_days_in_future: number;\n    min_cancellation_notice: number;\n  };\n  organizer: {\n    name: string;\n    email: string;\n  };\n};\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterKeys<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<any> ? K : never;\n}[keyof T];\n\n// Extracts the event type from an EventEmitter\nexport type EventEmitterEventType<T> = T extends EventEmitter<infer U> ? U : never;\n\n// Extracts a mapped type with keys of T that are EventEmitters, and their corresponding types\nexport type ExtractEventEmitterProperties<T> = {\n  [K in keyof T]: T[K] extends EventEmitter<infer U> ? { key: K; eventType: U } : never;\n}[keyof T];\n\nexport type NylasEvent = {\n  booking_id: string;\n  organizer: {\n    email: string;\n    name: string;\n    is_organizer?: boolean;\n  };\n  title: string;\n  description: string;\n  status: string;\n};\n\nexport type DataResponseError = Exclude<NylasErrorResponse['error'], undefined>;\nexport type DataResponseReturnType<T = any> = [T, null] | [null, DataResponseError];\n"]}

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

@@ -71,7 +71,8 @@ sp-theme {
 }
 
 .booked-event-header {
-  margin: 1.5rem 0;
+  margin: 1.5rem 4rem;
+  overflow-wrap: anywhere;
   display: flex;
   align-items: center;
   flex-direction: column;

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

@@ -14,12 +14,25 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
 import { RegisterComponent } from "../../../common/register-component";
 import { h, Host } from "@stencil/core";
-import { debug } from "../../../utils/utils";
+import { addMinutesToCurrentTime, debug } from "../../../utils/utils";
 import { TIMEZONE_MAP } from "../../../common/constants";
 export class NylasBookedEventCard {
     constructor() {
         this.handleCancelBookingButtonClicked = () => {
-            this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });
+            const today = new Date();
+            const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;
+            const dateTillCancellation = addMinutesToCurrentTime(today, minCancellationNotice);
+            if (today.getTime() < dateTillCancellation.getTime()) {
+                this.cancelBookedEventValidationError.emit({
+                    error: {
+                        title: 'Cancellation Error',
+                        message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,
+                    },
+                });
+            }
+            else {
+                this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });
+            }
         };
         this.handleRescheduleButtonClicked = () => {
             const errorHandler = (error) => {
@@ -46,6 +59,7 @@ export class NylasBookedEventCard {
         this.bookingInfo = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         this.selectedTimeslot = undefined;
+        this.configSettings = undefined;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -56,7 +70,7 @@ export class NylasBookedEventCard {
         debug(`[nylas-booked-event-card] Component did load`);
     }
     render() {
-        return (h(Host, { key: '1585329ee957e66c757861d989d29a9c1bb1451f', part: "nbec" }, h("sp-theme", { key: '113da8c82dd485188d40f1dea9f814be0c408ca2', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'af6b0a085e582f2d7bdb5503b9d5b6d3c7042fd3', class: "booked-event-timezone" }, h("globe-icon", { key: '0c3fbff398a24c97d82bb74434d9da574349919f' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '136d5341ef1d252b525359418e8df0a43f4160a0', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '767bcbb50f4ae8c294f3ab3733fe99cd7c4c78e1', class: "calendar-icon" }, h("calendar-check-icon", { key: 'e6fd3ec502795fbcaaf9d34b5b5c4cee2d732d4f' })), h("div", { key: '7dfa8cc7719760d396716ec81ab0022c01bbe22f', class: "booked-event-header" }, h("h2", { key: '34a452c275a3880f64575735a9e67db5a8cdea45', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: 'a081b1a3791e2e80dd651d1f9dbf5de2f2057f9a', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '0744f0fa4f3fff8f2dc0dec978632496d26bfae6' }), h("div", { key: '38460fbfbe5d19b4f0d48cb0df02e6d12c2f2740', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '1e282c329489e4def089d8fca1bd532557f91b92' }), h("h3", { key: '34bebd074562352d54628f763c339ccd4c44918a' }, "Booking date and time"), h("p", { key: 'd897859d30e6dd6651c0d4b0079bf0eab1df0356' }, new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '2aa56898e654721616459102329cbe498232d3e8' }), new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '5009ca55f795c2fd1240ed8bbc50216c4e66be87', class: "booking-participants" }), h("sp-divider", { key: '4b5b4325dda3f935387218429823b850d2a12f0e' }), h("div", { key: 'd25cc602a134085c19f0acea006db0707ceae7e5', class: "footer" }, h("sp-button", { key: '4625e515f2f79d6ecb0bb37813efe100c03cdaf2', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '9cbdc95cd53aa2d536751984b91ef5974e71179d', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
+        return (h(Host, { key: 'fd31424392865287d5a696d2ea4a0840974324c1', part: "nbec" }, h("sp-theme", { key: '5e4fab19061fd773200fc8856355d2efc6c7f767', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '5effb33fcc0492a2f968e5b29229a974fb1bf2a3', class: "booked-event-timezone" }, h("globe-icon", { key: '7be37ec8323f0c36112e4a8c5903c2078fe0ae0e' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '594e1cffea71361c2a52f5ed3f480b7fc7a6c0f4', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'e2bcea8c2cd100f6291846d29524ee08a2c6d6ad', class: "calendar-icon" }, h("calendar-check-icon", { key: '412d634ebd082474581d8ceba417bcefb45d10eb' })), h("div", { key: '97f9f06776a64a9ceed5f8b7c84ed9d03983e083', class: "booked-event-header" }, h("h2", { key: '7453ad8f16ca9e477a5c6f7791dbf2aa89514394', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '5877c31296ad8821c822b8447a9adb495eea9756', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '3845e25500160ac43e0c19af3c3c3c446caca39e' }), h("div", { key: '349d849d49be4e71264436c6add7039b889f8933', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'bccea293108ed90eece51494c79c8e5ae2db1411' }), h("h3", { key: 'ee98cd2b9c877a7e8342940892ff08be4ee647e0' }, "Booking date and time"), h("p", { key: '1efd072abb08a6606299911e594a07b2de396113' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: 'e014d22678d84c7541854985d945672efde047e9' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '0870d9969b572bf688c4c12de934066ed36f421a', class: "booking-participants" }), h("sp-divider", { key: '85674fadb92fc69826e738545a9f9bd1c478d522' }), h("div", { key: 'c60007a3d63af3cca707736386f7cbc1d2963626', class: "footer" }, h("sp-button", { key: 'f1295268e7f3341e37e7d66d460eabc28ad56482', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '276674ce1eb225cfb7ea95936e1cb05056b921cc', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
     }
     static get is() { return "nylas-booked-event-card"; }
     static get encapsulation() { return "shadow"; }
@@ -171,6 +185,29 @@ export class NylasBookedEventCard {
                     "tags": [],
                     "text": "The selected timeslot."
                 }
+            },
+            "configSettings": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfigSettings",
+                    "resolved": "any",
+                    "references": {
+                        "ConfigSettings": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The config settings for the scheduler."
+                },
+                "attribute": "config-settings",
+                "reflect": false
             }
         };
     }
@@ -232,6 +269,21 @@ export class NylasBookedEventCard {
                         }
                     }
                 }
+            }, {
+                "method": "cancelBookedEventValidationError",
+                "name": "cancelBookedEventValidationError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when an error occurs while cancelling the booking."
+                },
+                "complexType": {
+                    "original": "{\n    error: {\n      title: string;\n      message: string;\n    };\n  }",
+                    "resolved": "{ error: { title: string; message: string; }; }",
+                    "references": {}
+                }
             }];
     }
 }
@@ -243,6 +295,7 @@ __decorate([
             ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],
             ['scheduler.selectedTimezone', 'selectedTimezone'],
             ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {
             cancelBookingButtonClicked: async (event, nylasSchedulerConnector) => {

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { addMinutesToCurrentTime, debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n    error: {\n      title: string;\n      message: string;\n    };\n  }>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const today = new Date();\n    const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;\n    const dateTillCancellation = addMinutesToCurrentTime(today, minCancellationNotice);\n    if (today.getTime() < dateTillCancellation.getTime()) {\n      this.cancelBookedEventValidationError.emit({\n        error: {\n          title: 'Cancellation Error',\n          message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n        },\n      });\n    } else {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n    }\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -18,9 +18,16 @@ import { debug } from "../../../utils/utils";
 export class NylasCancelledEventCard {
     constructor() {
         this.handleCloseClicked = () => {
-            this.closeCancelEventCardClicked.emit();
+            this.isClosing = true;
+            const errorHandler = (error) => {
+                this.cancelledEventCardError.emit(error);
+                this.isClosing = false;
+            };
+            this.closeCancelEventCardClicked.emit({ errorHandler });
         };
         this.cancelledEventInfo = undefined;
+        this.isClosing = false;
+        this.configSettings = undefined;
     }
     connectedCallback() {
         debug(`[nylas-cancelled-event-card] Component connected`);
@@ -35,7 +42,7 @@ export class NylasCancelledEventCard {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '656dd5537bf436780d779e06362974295b6cf552', part: "ncec" }, h("sp-theme", { key: 'e6aa25eb233fd0bca7006fd9bf63c9fb54738a66', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '005da251e2cad861ca1cb2bc276b01990618995f', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'b30f8abc7dede57b909d69beb11a7da0015bf044', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9cc6e10a041979ff5a2a76c9d3e04446fdbfa27f' })), h("h3", { key: '0419fbe2aad08be631618146b77869307832f752', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: 'c3fb84c05112e0a4055f6eaaf878ad7afda8726e', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '0409b5465346ffea4c43789fa027f9b5a853d263', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '1d2efade3b5cd5ff48f3924c6b1e8248d2e478a3', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+        return (h(Host, { key: '105954b6497f7a8cf45faedb592896629e90c6d0', part: "ncec" }, h("sp-theme", { key: 'd248975c2139a611ab60c5c585d87e8701327a4b', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '090b767111679ca9968ac0b128c6685fed6e39db', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'ae1e57f0f2a39f5ad7f4b7b9ed493f3e93ccdeba', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '06250b1c0f330957f0f691d0f7724c608dffa28b' })), h("h3", { key: '1826c12ca770476cfd206d9d1a3b80f0d890da56', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '93c4c7e4ed245372e736c61c30b23e9be11453ec', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '21162d4c4e2ee6c2f95038b0e25e9ad0aed63742', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: 'ab6cb1da324717c3b375c9280f307a2590224f27', variant: "secondary", treatment: "outline", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? 'Closing...' : 'Close'))))));
     }
     static get is() { return "nylas-cancelled-event-card"; }
     static get encapsulation() { return "shadow"; }
@@ -75,9 +82,35 @@ export class NylasCancelledEventCard {
                     "tags": [],
                     "text": "The participant's name who booked the event / is logged in."
                 }
+            },
+            "configSettings": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfigSettings",
+                    "resolved": "undefined | { scheduler: { available_days_in_future: number; min_cancellation_notice: number; }; organizer: { name: string; email: string; }; }",
+                    "references": {
+                        "ConfigSettings": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::ConfigSettings"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The config settings for the scheduler."
+                }
             }
         };
     }
+    static get states() {
+        return {
+            "isClosing": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "closeCancelEventCardClicked",
@@ -90,9 +123,36 @@ export class NylasCancelledEventCard {
                     "text": "This event is fired when the close button is clicked on the cancelled event card."
                 },
                 "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
+                    "original": "{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }",
+                    "resolved": "{ errorHandler?: ((error: NylasSchedulerErrorResponse) => void) | undefined; }",
+                    "references": {
+                        "NylasSchedulerErrorResponse": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::NylasSchedulerErrorResponse"
+                        }
+                    }
+                }
+            }, {
+                "method": "cancelledEventCardError",
+                "name": "cancelledEventCardError",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when an error occurs."
+                },
+                "complexType": {
+                    "original": "NylasSchedulerErrorResponse",
+                    "resolved": "NylasSchedulerErrorResponse",
+                    "references": {
+                        "NylasSchedulerErrorResponse": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::NylasSchedulerErrorResponse"
+                        }
+                    }
                 }
             }];
     }
@@ -100,7 +160,16 @@ export class NylasCancelledEventCard {
 __decorate([
     RegisterComponent({
         name: 'nylas-cancelled-event-card',
-        eventToProps: {},
+        stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),
+        eventToProps: {
+            closeCancelEventCardClicked: async (_, nylasschedulerconnector) => {
+                const result = await nylasschedulerconnector.scheduler.resetCancel();
+                const { errorHandler } = _.detail;
+                if (errorHandler && (!result || 'error' in result)) {
+                    errorHandler(result);
+                }
+            },
+        },
         fireRegisterEvent: true,
     }),
     __metadata("design:type", Function),

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-cancelled-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAG9E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiBtC,MAAM,OAAO,uBAAuB;;QA2B1B,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,2BAA2B,CAAC,IAAI,EAAE,CAAC;QAC1C,CAAC,CAAC;;;IAlBF,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;IAC3D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAC/D,CAAC;IAWD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ;gBACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY;oBACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY;wBACtE,8EAAwB,CACpB;oBACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D;oBACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB,8DAEvE;oBACN,4DAAK,KAAK,EAAC,iCAAiC;wBAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,YAEnG,CACR,CACF,CACG,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAxBC;IALC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,EAAE;QAChB,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<void>;\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.closeCancelEventCardClicked.emit();\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    eventToProps: {},\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n            <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n              Your booking has been cancelled successfully!\n            </h3>\n            <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n              A cancellation email has been sent to the participants.\n            </div>\n            <div class=\"nylas-cancelled-event-card__cta\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n                Close\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-cancelled-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGrF,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAkBtC,MAAM,OAAO,uBAAuB;;QA0C1B,uBAAkB,GAAG,GAAG,EAAE;YAChC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,MAAM,YAAY,GAAG,CAAC,KAAkC,EAAE,EAAE;gBAC1D,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBACzC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACzB,CAAC,CAAC;YACF,IAAI,CAAC,2BAA2B,CAAC,IAAI,CAAC,EAAE,YAAY,EAAE,CAAC,CAAC;QAC1D,CAAC,CAAC;;yBAxC4B,KAAK;;;IAiBnC,iBAAiB;QACf,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,kDAAkD,CAAC,CAAC;IAC5D,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,iDAAiD,CAAC,CAAC;IAC3D,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,qDAAqD,CAAC,CAAC;IAC/D,CAAC;IA0BD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ;gBACpD,4DAAK,KAAK,EAAC,4BAA4B,EAAC,IAAI,EAAC,YAAY;oBACvD,4DAAK,KAAK,EAAC,2CAA2C,EAAC,IAAI,EAAC,YAAY;wBACtE,8EAAwB,CACpB;oBACN,2DAAI,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,aAAa,oDAE3D;oBACL,4DAAK,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAC,mBAAmB;;wBACpC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,IAAI,IAAI,kBAAkB;4BAC7F;oBACN,4DAAK,KAAK,EAAC,iCAAiC;wBAC1C,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,IACtI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAC9B,CACR,CACF,CACG,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAxBC;IAfC,iBAAiB,CAAkG;QAClH,IAAI,EAAE,4BAA4B;QAClC,YAAY,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC,CAAC,CAAC;QACvE,YAAY,EAAE;YACZ,2BAA2B,EAAE,KAAK,EAAE,CAA+E,EAAE,uBAAgD,EAAE,EAAE;gBACvK,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC;gBAErE,MAAM,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;gBAClC,IAAI,YAAY,IAAI,CAAC,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE,CAAC;oBACnD,YAAY,CAAC,MAAM,CAAC,CAAC;gBACvB,CAAC;YACH,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;qDAwBD","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n  tag: 'nylas-cancelled-event-card',\n  styleUrl: 'nylas-cancelled-event-card.scss',\n  shadow: true,\n})\nexport class NylasCancelledEventCard {\n  /**\n   * The participant's name who booked the event / is logged in.\n   */\n  @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n  /**\n   * Closing state of the cancelled event card button.\n   */\n  @State() isClosing: boolean = false;\n\n  /**\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * This event is fired when the close button is clicked on the cancelled event card.\n   */\n  @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs.\n   */\n  @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component connected`);\n  }\n\n  async componentWillLoad() {\n    debug(`[nylas-cancelled-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-cancelled-event-card] Component did load`);\n  }\n\n  disconnectedCallback() {\n    debug(`[nylas-cancelled-event-card] Component disconnected`);\n  }\n\n  private handleCloseClicked = () => {\n    this.isClosing = true;\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.cancelledEventCardError.emit(error);\n      this.isClosing = false;\n    };\n    this.closeCancelEventCardClicked.emit({ errorHandler });\n  };\n\n  @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-cancelled-event-card',\n    stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n    eventToProps: {\n      closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n        const result = await nylasschedulerconnector.scheduler.resetCancel();\n\n        const { errorHandler } = _.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ncec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n            <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n              <calendar-cancel-icon />\n            </div>\n            <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n              Your booking has been cancelled successfully!\n            </h3>\n            <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n              A cancellation email has been sent to {this.configSettings?.organizer?.name || 'the participants'}.\n            </div>\n            <div class=\"nylas-cancelled-event-card__cta\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n                {this.isClosing ? 'Closing...' : 'Close'}\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -13,16 +13,18 @@ var __metadata = (this && this.__metadata) || function (k, v) {
         return Reflect.metadata(k, v);
 };
 import { RegisterComponent } from "../../../common/register-component";
-import { getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth } from "../../../utils/utils";
+import { addDaysToCurrentDate, getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth } from "../../../utils/utils";
 import { Host, h } from "@stencil/core";
 import { timeDay } from "d3-time";
 export class NylasDatePicker {
     constructor() {
         this.selectableDates = undefined;
         this.selectedDate = undefined;
+        this.configSettings = undefined;
         this.isLoading = undefined;
         this.month = this.selectedDate || new Date();
         this.dates = this.getDates();
+        this.disableNextMonthButton = false;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -37,6 +39,15 @@ export class NylasDatePicker {
     }
     changeMonth(change) {
         this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);
+        const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);
+        const availableDaysInFuture = this.configSettings?.scheduler?.available_days_in_future;
+        const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);
+        if (endDate.getTime() < nextMonth.getTime()) {
+            this.disableNextMonthButton = true;
+        }
+        else {
+            this.disableNextMonthButton = false;
+        }
         this.dates = this.getDates();
         this.monthChanged.emit(this.month);
         this.selectDate();
@@ -48,7 +59,7 @@ export class NylasDatePicker {
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: 'da3c7e290b60613575379d559e03d5e1dca04535', part: "ndp" }, h("div", { key: '4bb1b14f4f609f601b27f7ad2eb4baeed6cc4d55', class: "nylas-date-picker" }, h("div", { key: '5d6c68298c5e9606bae9e45a99f0c59da3d36854', class: 'header flex-row' }, h("h2", { key: '2504a779961e1e07a881f2eb2f5ffa5d8329e627', part: 'ndp__month-header' }, h("strong", { key: '433fdd38ccf5b49144bafd3b284acd26b94d19c4' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ffaa3276b249a85dc197828625835ad1f2278179', class: 'pagination' }, h("button", { key: '451c9d09fc01e4c7ae35742d7c6b4b2f3da4d3ee', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '3a23fa0fb325feab4b56477602f122b800dce5ce' })), h("button", { key: '56b81156d02525a70c6c567e5facb1d9995ea2de', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length, part: "ndp__month-button" }, h("chevron-icon", { key: '1329d513678bffec6bc21d579b240e7af29ec530' })))), h("div", { key: '14eb94fe04ca2797f3377057a87825689b818719', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+        return (h(Host, { key: 'fd7de67053417b11844a66e5b978f7feb80efe18', part: "ndp" }, h("div", { key: 'a08943851e2239ad12121b90f35760d73a085441', class: "nylas-date-picker" }, h("div", { key: '832ad38012c55eb04ab2c5b0ceb50052ab3edd42', class: 'header flex-row' }, h("h2", { key: '2df451227e57dfee081c1d4435443e479cf8871c', part: 'ndp__month-header' }, h("strong", { key: '63421dca4b9bf36207ba05e9eff795c7c198287c' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ca982a82d87baf5658674624c1153f14e77470aa', class: 'pagination' }, h("button", { key: 'd2a41582014f92c23784c71fe1df9834d77fd355', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '4f319da7e440236edb9bfa711fb0b05cd046dc8e' })), h("button", { key: 'ff00426293e1857592ebae58557ea46e5db9858d', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '7075f5e8da61c9d91fb612771a3d7672f1521b6f' })))), h("div", { key: '3ad884077d163de5182731c03bf856c9e204f411', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
             return (h("div", { class: 'day', part: "ndp__day" }, day));
         }), this.dates.map((date, i) => {
             const isDisabled = this.isDisabled(date, this.selectableDates);
@@ -120,6 +131,27 @@ export class NylasDatePicker {
                     "text": "The selected date."
                 }
             },
+            "configSettings": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ConfigSettings",
+                    "resolved": "undefined | { scheduler: { available_days_in_future: number; min_cancellation_notice: number; }; organizer: { name: string; email: string; }; }",
+                    "references": {
+                        "ConfigSettings": {
+                            "location": "import",
+                            "path": "@/stores/scheduler-store",
+                            "id": "src/stores/scheduler-store.ts::ConfigSettings"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The config settings."
+                }
+            },
             "isLoading": {
                 "type": "boolean",
                 "mutable": false,
@@ -142,7 +174,8 @@ export class NylasDatePicker {
     static get states() {
         return {
             "month": {},
-            "dates": {}
+            "dates": {},
+            "disableNextMonthButton": {}
         };
     }
     static get events() {
@@ -196,6 +229,7 @@ __decorate([
             ['scheduler.selectableDates', 'selectableDates'],
             ['scheduler.selectedDate', 'selectedDate'],
             ['scheduler.isLoading', 'isLoading'],
+            ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {
             dateSelected: async (event, nylasSchedulerConnector) => {

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

@@ -1 +1 @@
-{"version":3,"file":"nylas-date-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-date-picker/nylas-date-picker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { timeDay } from 'd3-time';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\n\n/**\n * The `nylas-date-picker` component is a UI component that allows users to select a date.\n *\n * @part ndp - The date picker host.\n * @part ndp__month-header - The month header.\n * @part ndp__month-button - The month button.\n * @part ndp__day - The day.\n * @part ndp__date - The date.\n * @part ndp__date--selected - The selected date.\n * @part ndp__date--current-day - The current day.\n * @part ndp__date--current-month - The dates in the current month.\n */\n@Component({\n  tag: 'nylas-date-picker',\n  styleUrl: 'nylas-date-picker.scss',\n  shadow: true,\n})\nexport class NylasDatePicker {\n  /**\n   * The dates that are selectable.\n   */\n  @Prop() selectableDates?: Date[];\n\n  /**\n   * The selected date.\n   */\n  @Prop() selectedDate?: Date;\n\n  /**\n   * The loading state.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The month to display.\n   */\n  @State() month: Date = this.selectedDate || new Date();\n\n  /**\n   * The dates to render.\n   */\n  @State() dates: Date[] = this.getDates();\n\n  /**\n   * This event is fired when a date is selected.\n   */\n  @Event() dateSelected!: EventEmitter<Date>;\n\n  /**\n   * This event is fired when the month is changed.\n   */\n  @Event() monthChanged!: EventEmitter<Date>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Get the dates to render, including the days from the previous and next months.\n   * @returns The dates to render.\n   */\n  private getDates() {\n    const lastDayOfMonth = getLastDayOfMonth(this.month);\n    const firstDayOfMonth = getFirstDayOfMonth(this.month);\n\n    return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));\n  }\n\n  /**\n   * Select a date.\n   * @param date The date to select.\n   */\n  private selectDate(date?: Date) {\n    this.dateSelected.emit(date);\n  }\n\n  /**\n   * Change the month.\n   * @param change The change in months.\n   */\n  private changeMonth(change: number) {\n    this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);\n    this.dates = this.getDates();\n    this.monthChanged.emit(this.month);\n    // unset selected date when changing month\n    this.selectDate();\n  }\n\n  private isSelected(date: Date | undefined, selectedDate: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;\n  }\n\n  private isDisabled(date: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;\n  }\n\n  @RegisterComponent<NylasDatePicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-date-picker',\n    stateToProps: new Map([\n      ['scheduler.selectableDates', 'selectableDates'],\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.isLoading', 'isLoading'],\n    ]),\n    eventToProps: {\n      dateSelected: async (event: CustomEvent<Date>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectDate(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ndp\">\n        <div class=\"nylas-date-picker\">\n          <div class={'header flex-row'}>\n            <h2 part={'ndp__month-header'}>\n              <strong>{this.month.toLocaleDateString(undefined, { month: 'long' })}</strong>\n              &nbsp;\n              {this.month.toLocaleDateString(undefined, { year: 'numeric' })}\n            </h2>\n            <div class={'pagination'}>\n              <button\n                onClick={() => this.changeMonth(-1)}\n                class={{ 'chevron-left': true, 'button': true }}\n                disabled={!this.selectableDates?.length || this.month <= new Date()}\n                part=\"ndp__month-button\"\n              >\n                <chevron-icon />\n              </button>\n              <button onClick={() => this.changeMonth(1)} class={{ 'chevron-right': true, 'button': true }} disabled={!this.selectableDates?.length} part=\"ndp__month-button\">\n                <chevron-icon />\n              </button>\n            </div>\n          </div>\n\n          <div class={'dates'}>\n            {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {\n              return (\n                <div class={'day'} part=\"ndp__day\">\n                  {day}\n                </div>\n              );\n            })}\n            {this.dates.map((date, i) => {\n              const isDisabled = this.isDisabled(date, this.selectableDates);\n\n              if (this.isLoading) {\n                return (\n                  <button\n                    disabled\n                    class={{\n                      'date day-skeleton': true,\n                      'current-month': isSameMonth(date, this.month),\n                    }}\n                    style={{ animationDelay: `${i * 20}ms` }}\n                    part={'ndp__date'}\n                  >\n                    {date.getDate()}\n                  </button>\n                );\n              }\n              return (\n                <button\n                  class={{\n                    'date': true,\n                    'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),\n                    'current-day': isSameDay(date, new Date()),\n                    'current-month': isSameMonth(date, this.month),\n                  }}\n                  aria-lang={date.toLocaleDateString(undefined, { dateStyle: 'full' })}\n                  disabled={isDisabled}\n                  onClick={() => this.selectDate(date)}\n                  part={`ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}`}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-date-picker.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-date-picker/nylas-date-picker.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACpH,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrF,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAsBlC,MAAM,OAAO,eAAe;;;;;;qBAwBH,IAAI,CAAC,YAAY,IAAI,IAAI,IAAI,EAAE;qBAK7B,IAAI,CAAC,QAAQ,EAAE;sCAKG,KAAK;;IAYhD,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,iBAAiB,KAAI,CAAC;IAMd,QAAQ;QACd,MAAM,cAAc,GAAG,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrD,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEvD,OAAO,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,GAAG,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;IAChJ,CAAC;IAMO,UAAU,CAAC,IAAW;QAC5B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAMO,WAAW,CAAC,MAAc;QAChC,IAAI,CAAC,KAAK,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;QACnF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;QACnF,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,wBAAwB,CAAC;QACvF,MAAM,OAAO,GAAG,oBAAoB,CAAC,IAAI,IAAI,EAAE,EAAE,qBAAqB,CAAC,CAAC;QACxE,IAAI,OAAO,CAAC,OAAO,EAAE,GAAG,SAAS,CAAC,OAAO,EAAE,EAAE,CAAC;YAC5C,IAAI,CAAC,sBAAsB,GAAG,IAAI,CAAC;QACrC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,sBAAsB,GAAG,KAAK,CAAC;QACtC,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;QAC7B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAEnC,IAAI,CAAC,UAAU,EAAE,CAAC;IACpB,CAAC;IAEO,UAAU,CAAC,IAAsB,EAAE,YAA8B,EAAE,eAAmC;QAC5G,OAAO,IAAI,IAAI,YAAY,IAAI,SAAS,CAAC,IAAI,EAAE,YAAY,CAAC,IAAI,eAAe,IAAI,eAAe,EAAE,MAAM,GAAG,CAAC,CAAC;IACjH,CAAC;IAEO,UAAU,CAAC,IAAsB,EAAE,eAAmC;QAC5E,OAAO,IAAI,IAAI,eAAe,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,KAAK,SAAS,CAAC;IAC9E,CAAC;IAiBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK;YACd,4DAAK,KAAK,EAAC,mBAAmB;gBAC5B,4DAAK,KAAK,EAAE,iBAAiB;oBAC3B,2DAAI,IAAI,EAAE,mBAAmB;wBAC3B,iEAAS,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAU;;wBAE7E,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAC3D;oBACL,4DAAK,KAAK,EAAE,YAAY;wBACtB,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,EACnC,KAAK,EAAE,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAC/C,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,IAAI,EAAE,EACnE,IAAI,EAAC,mBAAmB;4BAExB,sEAAgB,CACT;wBACT,+DACE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAClC,KAAK,EAAE,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,EAChD,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,IAAI,IAAI,CAAC,sBAAsB,EACtE,IAAI,EAAC,mBAAmB;4BAExB,sEAAgB,CACT,CACL,CACF;gBAEN,4DAAK,KAAK,EAAE,OAAO;oBAChB,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;wBAC3D,OAAO,CACL,WAAK,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,UAAU,IAC/B,GAAG,CACA,CACP,CAAC;oBACJ,CAAC,CAAC;oBACD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;wBAC1B,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;wBAE/D,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;4BACnB,OAAO,CACL,cACE,QAAQ,QACR,KAAK,EAAE;oCACL,mBAAmB,EAAE,IAAI;oCACzB,eAAe,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;iCAC/C,EACD,KAAK,EAAE,EAAE,cAAc,EAAE,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,EACxC,IAAI,EAAE,WAAW,IAEhB,IAAI,CAAC,OAAO,EAAE,CACR,CACV,CAAC;wBACJ,CAAC;wBACD,OAAO,CACL,cACE,KAAK,EAAE;gCACL,MAAM,EAAE,IAAI;gCACZ,UAAU,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,CAAC,CAAC;gCACnI,aAAa,EAAE,SAAS,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC;gCAC1C,eAAe,EAAE,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC;6BAC/C,eACU,IAAI,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,EACpE,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EACpC,IAAI,EAAE,aAAa,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,CAAC,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,EAAE,IAEjP,IAAI,CAAC,OAAO,EAAE,CACR,CACV,CAAC;oBACJ,CAAC,CAAC,CACE,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AA9EC;IAfC,iBAAiB,CAA0F;QAC1G,IAAI,EAAE,mBAAmB;QACzB,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,2BAA2B,EAAE,iBAAiB,CAAC;YAChD,CAAC,wBAAwB,EAAE,cAAc,CAAC;YAC1C,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;SAC/C,CAAC;QACF,YAAY,EAAE;YACZ,YAAY,EAAE,KAAK,EAAE,KAAwB,EAAE,uBAAgD,EAAE,EAAE;gBACjG,uBAAuB,CAAC,SAAS,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC7D,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;6CA8ED","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { addDaysToCurrentDate, getFirstDayOfMonth, getLastDayOfMonth, isSameDay, isSameMonth } from '@/utils/utils';\nimport { Component, Event, EventEmitter, Host, Prop, State, h } from '@stencil/core';\nimport { timeDay } from 'd3-time';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { ConfigSettings } from '@/stores/scheduler-store';\n\n/**\n * The `nylas-date-picker` component is a UI component that allows users to select a date.\n *\n * @part ndp - The date picker host.\n * @part ndp__month-header - The month header.\n * @part ndp__month-button - The month button.\n * @part ndp__day - The day.\n * @part ndp__date - The date.\n * @part ndp__date--selected - The selected date.\n * @part ndp__date--current-day - The current day.\n * @part ndp__date--current-month - The dates in the current month.\n */\n@Component({\n  tag: 'nylas-date-picker',\n  styleUrl: 'nylas-date-picker.scss',\n  shadow: true,\n})\nexport class NylasDatePicker {\n  /**\n   * The dates that are selectable.\n   */\n  @Prop() selectableDates?: Date[];\n\n  /**\n   * The selected date.\n   */\n  @Prop() selectedDate?: Date;\n\n  /**\n   * The config settings.\n   */\n  @Prop() configSettings?: ConfigSettings;\n\n  /**\n   * The loading state.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * The month to display.\n   */\n  @State() month: Date = this.selectedDate || new Date();\n\n  /**\n   * The dates to render.\n   */\n  @State() dates: Date[] = this.getDates();\n\n  /**\n   * The state to disable the next month button.\n   */\n  @State() disableNextMonthButton: boolean = false;\n\n  /**\n   * This event is fired when a date is selected.\n   */\n  @Event() dateSelected!: EventEmitter<Date>;\n\n  /**\n   * This event is fired when the month is changed.\n   */\n  @Event() monthChanged!: EventEmitter<Date>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  /**\n   * Get the dates to render, including the days from the previous and next months.\n   * @returns The dates to render.\n   */\n  private getDates() {\n    const lastDayOfMonth = getLastDayOfMonth(this.month);\n    const firstDayOfMonth = getFirstDayOfMonth(this.month);\n\n    return timeDay.range(timeDay.offset(firstDayOfMonth, -firstDayOfMonth.getDay()), timeDay.offset(lastDayOfMonth, 7 - lastDayOfMonth.getDay()));\n  }\n\n  /**\n   * Select a date.\n   * @param date The date to select.\n   */\n  private selectDate(date?: Date) {\n    this.dateSelected.emit(date);\n  }\n\n  /**\n   * Change the month.\n   * @param change The change in months.\n   */\n  private changeMonth(change: number) {\n    this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);\n    const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);\n    const availableDaysInFuture = this.configSettings?.scheduler?.available_days_in_future;\n    const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);\n    if (endDate.getTime() < nextMonth.getTime()) {\n      this.disableNextMonthButton = true;\n    } else {\n      this.disableNextMonthButton = false;\n    }\n    this.dates = this.getDates();\n    this.monthChanged.emit(this.month);\n    // unset selected date when changing month\n    this.selectDate();\n  }\n\n  private isSelected(date: Date | undefined, selectedDate: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectedDate && isSameDay(date, selectedDate) && selectableDates && selectableDates?.length > 0;\n  }\n\n  private isDisabled(date: Date | undefined, selectableDates: Date[] | undefined) {\n    return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;\n  }\n\n  @RegisterComponent<NylasDatePicker, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-date-picker',\n    stateToProps: new Map([\n      ['scheduler.selectableDates', 'selectableDates'],\n      ['scheduler.selectedDate', 'selectedDate'],\n      ['scheduler.isLoading', 'isLoading'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      dateSelected: async (event: CustomEvent<Date>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.selectDate(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"ndp\">\n        <div class=\"nylas-date-picker\">\n          <div class={'header flex-row'}>\n            <h2 part={'ndp__month-header'}>\n              <strong>{this.month.toLocaleDateString(undefined, { month: 'long' })}</strong>\n              &nbsp;\n              {this.month.toLocaleDateString(undefined, { year: 'numeric' })}\n            </h2>\n            <div class={'pagination'}>\n              <button\n                onClick={() => this.changeMonth(-1)}\n                class={{ 'chevron-left': true, 'button': true }}\n                disabled={!this.selectableDates?.length || this.month <= new Date()}\n                part=\"ndp__month-button\"\n              >\n                <chevron-icon />\n              </button>\n              <button\n                onClick={() => this.changeMonth(1)}\n                class={{ 'chevron-right': true, 'button': true }}\n                disabled={!this.selectableDates?.length || this.disableNextMonthButton}\n                part=\"ndp__month-button\"\n              >\n                <chevron-icon />\n              </button>\n            </div>\n          </div>\n\n          <div class={'dates'}>\n            {['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {\n              return (\n                <div class={'day'} part=\"ndp__day\">\n                  {day}\n                </div>\n              );\n            })}\n            {this.dates.map((date, i) => {\n              const isDisabled = this.isDisabled(date, this.selectableDates);\n\n              if (this.isLoading) {\n                return (\n                  <button\n                    disabled\n                    class={{\n                      'date day-skeleton': true,\n                      'current-month': isSameMonth(date, this.month),\n                    }}\n                    style={{ animationDelay: `${i * 20}ms` }}\n                    part={'ndp__date'}\n                  >\n                    {date.getDate()}\n                  </button>\n                );\n              }\n              return (\n                <button\n                  class={{\n                    'date': true,\n                    'selected': !!(this.selectedDate && isSameDay(date, this.selectedDate) && this.selectableDates && this.selectableDates?.length > 0),\n                    'current-day': isSameDay(date, new Date()),\n                    'current-month': isSameMonth(date, this.month),\n                  }}\n                  aria-lang={date.toLocaleDateString(undefined, { dateStyle: 'full' })}\n                  disabled={isDisabled}\n                  onClick={() => this.selectDate(date)}\n                  part={`ndp__date ${this.isSelected(date, this.selectedDate, this.selectableDates) ? 'ndp__date--selected' : ''} ${isSameDay(date, new Date()) ? 'ndp__date--current-day' : ''} ${isSameMonth(date, this.month) ? 'ndp__date--current-month' : ''}`}\n                >\n                  {date.getDate()}\n                </button>\n              );\n            })}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}