@nylas/web-elements 2.0.1 → 2.0.3

package/dist/components/nylas-booked-event-card2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { R as RegisterComponent } from './register-component.js';
-import { a as debug, b as instance, n as capitalizeFirstLetter, o as formatBookedEventDate } from './utils.js';
+import { b as instance, a as debug, n as capitalizeFirstLetter, o as formatBookedEventDate } from './utils.js';
 import { T as TIMEZONE_MAP, a as LANGUAGE_CODE_TO_LOCALE_MAP } from './constants.js';
 import { d as defineCustomElement$5 } from './button-component2.js';
 import { d as defineCustomElement$4 } from './calendar-check.js';
@@ -86,6 +86,11 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+    }
     connectedCallback() { }
     disconnectedCallback() { }
     async componentWillLoad() {
@@ -120,13 +125,13 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
     render() {
         const bookingType = this.configSettings?.booking_type;
         const isManualConfirmation = bookingType && bookingType !== 'booking';
-        return (h(Host, { key: '746e23e82adf30da44ac6a160400705251a5cf98', part: "nbec" }, h("div", { key: 'aa3e79d294ff41b4a43775763f9e5f1922f955c7', class: "nylas-booked-event-card" }, h("div", { key: 'cbb343663633b5ba80875f42af0bb0d091ee1ac8', class: "booked-event-timezone" }, h("globe-icon", { key: '8c94142bd486144efaa251770c87f4ec15481b41' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'e06ef2c5b7a1977ff1953027d6109cb8a1acf493', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '5a99626d44f6ef819af2606bf24208e1833e3a54', class: "calendar-icon" }, h("calendar-check-icon", { key: '06c5ec0241535ee0ea82c743653f93442bc9a5fa' })), h("div", { key: 'b38fa39209c64394902a0e7607248d0d0c73adf2', class: "booked-event-header" }, h("h2", { key: '1706d065e1f427efcccef18f382702e95da33080', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
+        return (h(Host, { key: '0762e32091a5674187788413717366b6213a28fd', part: "nbec" }, h("div", { key: '9cb934481989459e30f9fc718e20855f0f186027', class: "nylas-booked-event-card" }, h("div", { key: 'e7b810785f800f82f0c73eaa665cd56bb9406c85', class: "booked-event-timezone" }, h("globe-icon", { key: '3c29fd04b4fc90e0a6583285cbf872ec840ec0d6' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: 'e7f4406d8c3b110d84cb1d99e5ab8db89954e2f4', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'c656687daf9b51190341d35db6c338a9a61df3a2', class: "calendar-icon" }, h("calendar-check-icon", { key: 'e1f5cdfa288db54a537f4250d65e2ab0279fb84e' })), h("div", { key: '50e125630023b8dd19d537d20374f9a5464a1547', class: "booked-event-header" }, h("h2", { key: '24e6e52952321065ee1e63c34d55cd1891edeafc', slot: "card-title", part: "nbec__title" }, !!this.rescheduleBookingId && !this.isLoading
             ? `${instance.t('bookingRescheduled')}`
             : isManualConfirmation && !this.isLoading
                 ? `${instance.t('bookingSent')}`
-                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'c7bfce355ce08d858862bc7672f20e8a2bb3dce9', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: '2074c51dfdfd0753fcd3d598b7633520bf70ab63', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'dbfe39fadeeb08186a5214cfb9ca5d3c8da55cb1' }), h("h3", { key: 'edb9ed53cb25e9e06ec7b27f8141fa6f422c1511' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: '24d8d606ab3e217256152e249ee435d070df0c5b' }, this.selectedTimeslot?.start_time
+                : `${instance.t('bookingConfirmed')}`, "!"), h("div", { key: 'cb07bf7f3685624f2b50bcba569399ba084ab00d', class: "card-description", part: "nbec__description" }, isManualConfirmation ? instance.t('bookingSentDescription') : h("span", null, instance.t('bookingConfirmedDescription')))), h("div", { key: 'bceb86109e1a9ae6f2c1d98e0267e7f73d763aae', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '0e6fdd3cb183e4d00c6c31fe368eefb01d0465d8' }), h("h3", { key: 'c7561d2be55109d69650aa41bb6d356018e1973b' }, instance.t('bookingDateAndTimeHeader')), h("p", { key: '31818a7c4a89014438b7af5e722f49728918cc27' }, this.selectedTimeslot?.start_time
             ? capitalizeFirstLetter(formatBookedEventDate(this.selectedTimeslot?.start_time, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage]))
-            : '-', ' ', h("br", { key: '5949a97ff7e7b256e410f591b810332a72e0696c' }), this.startTime, " - ", this.endTime)), h("div", { key: '3450618726c762232151511fd28570834cf07cc4', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
+            : '-', ' ', h("br", { key: '7fcd531af1cea5464ab08f9043aabb4cde0a91db' }), this.startTime, " - ", this.endTime)), h("div", { key: '8d2d827677bf300ad2b0f4dc2c28ac3777971af1', class: "booking-participants" }), !isManualConfirmation && (h("div", { class: "button-container" }, h("div", { class: {
                 'footer': true,
                 'no-footer': (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||
                     this.configSettings?.booking_type === 'organizer-confirmation',
@@ -135,7 +140,8 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
     }
     get host() { return this; }
     static get watchers() { return {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
     static get style() { return NylasBookedEventCardStyle0; }
 }, [1, "nylas-booked-event-card", {
@@ -152,7 +158,8 @@ const NylasBookedEventCard = proxyCustomElement(class NylasBookedEventCard exten
         "startTime": [32],
         "endTime": [32]
     }, undefined, {
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({

package/dist/components/nylas-booked-event-card2.js.map

@@ -1 +1 @@
-{"file":"nylas-booked-event-card2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-booked-event-card {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 16px;\n  font-weight: 400;\n  border-bottom: 1px solid var(--nylas-base-200);\n  width: inherit;\n  padding: 0 0 1.5rem;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  .card-description {\n    text-align: center;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 4px;\n  }\n\n  p {\n    font-size: 16px;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.button-container {\n  width: inherit;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  border-top: 1px solid var(--nylas-base-200);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport type { NylasSchedulerBookingData } from '@/common/types';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatBookedEventDate } from '@/utils/utils';\nimport { LANGUAGE_CODE_TO_LOCALE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\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 host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasBookedEventCardElement;\n\n  /**\n   * @standalone\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * @standalone\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * @standalone\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\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 selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n  /**\n   * The 12-hour time format.\n   */\n  @Prop() hour12?: boolean;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\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  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\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    if (!this.eventInfo) {\n      console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n    }\n    if (!this.bookingInfo) {\n      console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n    }\n    this.applyThemeConfig(this.themeConfig);\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n\n    const timeFormat = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n      hour12: this.hour12,\n    });\n    this.startTime = timeFormat.format(this.selectedTimeslot?.start_time as Date);\n    this.endTime = timeFormat.format(this.selectedTimeslot?.end_time as Date);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const startTime = new Date(this.selectedTimeslot.start_time);\n    const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n    if (!minCancellationNotice) {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n      return;\n    }\n    const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n    if (dateTillCancellation < new Date().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  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.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.hour12', 'hour12'],\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      rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n      },\n      cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingType = this.configSettings?.booking_type;\n    const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n    return (\n      <Host part=\"nbec\">\n        <div class=\"nylas-booked-event-card\">\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                {!!this.rescheduleBookingId && !this.isLoading\n                  ? `${i18next.t('bookingRescheduled')}`\n                  : isManualConfirmation && !this.isLoading\n                    ? `${i18next.t('bookingSent')}`\n                    : `${i18next.t('bookingConfirmed')}`}\n                !\n              </h2>\n              <div class=\"card-description\" part=\"nbec__description\">\n                {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n              </div>\n            </div>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n              <p>\n                {this.selectedTimeslot?.start_time\n                  ? capitalizeFirstLetter(\n                      formatBookedEventDate(this.selectedTimeslot?.start_time as Date, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage]),\n                    )\n                  : '-'}{' '}\n                <br />\n                {this.startTime} - {this.endTime}\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\n            {!isManualConfirmation && (\n              <div class=\"button-container\">\n                <div\n                  class={{\n                    'footer': true,\n                    'no-footer':\n                      (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||\n                      this.configSettings?.booking_type === 'organizer-confirmation',\n                    'no-template-cols': !!this.configSettings?.scheduler?.hide_cancellation_options || !!this.configSettings?.scheduler?.hide_rescheduling_options,\n                  }}\n                >\n                  {!this.configSettings?.scheduler?.hide_cancellation_options && (\n                    <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                      {`${i18next.t('cancelBookingButton')}`}\n                    </button-component>\n                  )}\n                  {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n                    <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} disabled={this.isLoading} part=\"nbec__button-outline nbec__reschedule-cta\">\n                      {`${i18next.t('rescheduleBookingButton')}`}\n                    </button-component>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-booked-event-card2.js","mappings":";;;;;;;;;;AAAA,MAAM,uBAAuB,GAAG,msJAAmsJ,CAAC;AACpuJ,mCAAe,uBAAuB;;;;;;;;;;;;;;;;MC4BzB,oBAAoB;;;;;;;;;QA0IvB,qCAAgC,GAAG;YACzC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;YAC7D,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAuB,CAAC;YACtF,IAAI,CAAC,qBAAqB,EAAE;gBAC1B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;gBAC/E,OAAO;aACR;YACD,MAAM,oBAAoB,GAAG,SAAS,CAAC,OAAO,EAAE,GAAG,qBAAqB,GAAG,EAAE,GAAG,IAAI,CAAC;YACrF,IAAI,oBAAoB,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;gBAC/C,IAAI,CAAC,gCAAgC,CAAC,IAAI,CAAC;oBACzC,KAAK,EAAE;wBACL,KAAK,EAAE,oBAAoB;wBAC3B,OAAO,EAAE,wCAAwC,qBAAqB,wBAAwB;qBAC/F;iBACF,CAAC,CAAC;aACJ;iBAAM;gBACL,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;aAChF;SACF,CAAC;QAEM,kCAA6B,GAAG;YACtC,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC7C,CAAC;YACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;SAC3F,CAAC;QAEF,sBAAiB,GAAG,CAAC,IAAY;YAC/B,QAAQ,IAAI;gBACV,KAAK,MAAM;oBACT,OAAO,MAAM,CAAC;gBAChB,KAAK,KAAK;oBACR,OAAO,KAAK,CAAC;gBACf;oBACE,OAAO,EAAE,CAAC;aACb;SACF,CAAC;;;;;;;gCAhI0C,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;;gCAUd,SAAS,CAAC,QAAQ;;yBAMnE,EAAE;uBACJ,EAAE;;IA4B7B,kBAAkB,CAAC,cAA2B;QAC5C,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,CAAC;KACvC;IAGD,8BAA8B,CAAC,MAAqB,EAAE,MAAqB;QACzE,IAAI,MAAM,KAAK,MAAM;YAAE,OAAO;QAC9BA,QAAO,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;KAChC;IAED,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,+CAA+C,CAAC,CAAC;KACxD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,8CAA8C,CAAC,CAAC;QACtD,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,OAAO,CAAC,IAAI,CAAC,oJAAoJ,CAAC,CAAC;SACpK;QACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,wJAAwJ,CAAC,CAAC;SACxK;QACD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxC,MAAM,MAAM,GAAG,2BAA2B,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,CAAC;QAE1E,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE;YACjD,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,SAAS;YACjB,QAAQ,EAAE,IAAI,CAAC,gBAAgB;YAC/B,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAkB,CAAC,CAAC;QAC9E,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,EAAE,QAAgB,CAAC,CAAC;KAC3E;IAED,gBAAgB,CAAC,WAAyB;QACxC,IAAI,WAAW,EAAE;YACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;gBACtD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;aAC9C;SACF;KACF;IA4ED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;QACtD,MAAM,oBAAoB,GAAG,WAAW,IAAI,WAAW,KAAK,SAAS,CAAC;QAEtE,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,uBAAuB,IAChC,oEAAyB,EACxB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAChC,EACN,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,YAAY,IAC/C,4DAAK,KAAK,EAAC,eAAe,IACxB,6EAAuB,CACnB,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,2DAAI,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,IACrC,CAAC,CAAC,IAAI,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAC,SAAS;cAC1C,GAAGA,QAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,EAAE;cACpC,oBAAoB,IAAI,CAAC,IAAI,CAAC,SAAS;kBACrC,GAAGA,QAAO,CAAC,CAAC,CAAC,aAAa,CAAC,EAAE;kBAC7B,GAAGA,QAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAAE,MAErC,EACL,4DAAK,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAC,mBAAmB,IACnD,oBAAoB,GAAGA,QAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,GAAG,gBAAOA,QAAO,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAQ,CACjH,CACF,EACN,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,+EAA+C,EAC/C,6DAAKA,QAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAM,EAChD,4DACG,IAAI,CAAC,gBAAgB,EAAE,UAAU;cAC9B,qBAAqB,CACnB,qBAAqB,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAkB,EAAE,IAAI,CAAC,gBAAgB,EAAE,2BAA2B,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAC5I;cACD,GAAG,EAAE,GAAG,EACZ,4DAAM,EACL,IAAI,CAAC,SAAS,SAAK,IAAI,CAAC,OAAO,CAC9B,CACA,EACN,4DAAK,KAAK,EAAC,sBAAsB,GAc3B,EAEL,CAAC,oBAAoB,KACpB,WAAK,KAAK,EAAC,kBAAkB,IAC3B,WACE,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI;gBACd,WAAW,EACT,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB;oBACvH,IAAI,CAAC,cAAc,EAAE,YAAY,KAAK,wBAAwB;gBAChE,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB;aAC/I,IAEA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,KACzD,wBAAkB,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,IAAI,EAAC,uCAAuC,IACnI,GAAGA,QAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,EAAE,CACrB,CACpB,EACA,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,yBAAyB,KACzD,wBAAkB,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,6BAA6B,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,2CAA2C,IACxJ,GAAGA,QAAO,CAAC,CAAC,CAAC,yBAAyB,CAAC,EAAE,CACzB,CACpB,CACG,CACF,CACP,CACG,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;AArFD;IApCC,iBAAiB,CAA+F;QAC/G,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,+BAA+B,EAAE,qBAAqB,CAAC;YACxD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;YAC9C,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,kBAAkB,EAAE,QAAQ,CAAC;SAC/B,CAAC;QACF,YAAY,EAAE;YACZ,0BAA0B,EAAE,OAAO,KAAyC,EAAE,uBAAgD;gBAC5H,uBAAuB,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;aACrE;YACD,uBAAuB,EAAE,OACvB,KAAsG,EACtG,uBAAgD;gBAEhD,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC7F,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACtC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;YACD,0BAA0B,EAAE,OAAO,KAA+C,EAAE,wBAAiD;gBACnI,KAAK,CAAC,yBAAyB,EAAE,4BAA4B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC9E;YACD,gCAAgC,EAAE,OAAO,KAAiE,EAAE,wBAAiD;gBAC3J,KAAK,CAAC,yBAAyB,EAAE,kCAAkC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aACpF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;kDAsFD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["i18next"],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\n.nylas-booked-event-card {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 16px;\n  font-weight: 400;\n  border-bottom: 1px solid var(--nylas-base-200);\n  width: inherit;\n  padding: 0 0 1.5rem;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n\n  .card-description {\n    text-align: center;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 4px;\n  }\n\n  p {\n    font-size: 16px;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.button-container {\n  width: inherit;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  border-top: 1px solid var(--nylas-base-200);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n\n  &.no-template-cols {\n    grid-template-columns: 1fr;\n  }\n\n  &.no-footer {\n    display: none;\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport type { NylasSchedulerBookingData } from '@/common/types';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { capitalizeFirstLetter, debug, formatBookedEventDate } from '@/utils/utils';\nimport { LANGUAGE_CODE, LANGUAGE_CODE_TO_LOCALE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, ThemeConfig, Timeslot } from '@nylas/core';\nimport i18next from '@/utils/i18n';\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 host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasBookedEventCardElement;\n\n  /**\n   * @standalone\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * @standalone\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * @standalone\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * @standalone\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * @standalone\n   * The loading state prop. Used to display loading state when fetching availability.\n   */\n  @Prop() readonly isLoading?: boolean;\n\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\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 selected language.\n   */\n  @Prop({ attribute: 'selected-language' }) readonly selectedLanguage: string = navigator.language;\n  /**\n   * The 12-hour time format.\n   */\n  @Prop() hour12?: boolean;\n\n  @State() startTime: string = '';\n  @State() endTime: string = '';\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  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\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    if (!this.eventInfo) {\n      console.warn('[nylas-booked-event-card] \"eventInfo\" prop missing. Please provide the event info to display the event details in the booked event card component.');\n    }\n    if (!this.bookingInfo) {\n      console.warn('[nylas-booked-event-card] \"bookingInfo\" prop missing. Please provide the booking info to display the guest details in the booked event card component.');\n    }\n    this.applyThemeConfig(this.themeConfig);\n    const locale = LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage || 'en'];\n\n    const timeFormat = new Intl.DateTimeFormat(locale, {\n      hour: '2-digit',\n      minute: '2-digit',\n      timeZone: this.selectedTimezone,\n      hour12: this.hour12,\n    });\n    this.startTime = timeFormat.format(this.selectedTimeslot?.start_time as Date);\n    this.endTime = timeFormat.format(this.selectedTimeslot?.end_time as Date);\n  }\n\n  applyThemeConfig(themeConfig?: ThemeConfig) {\n    if (themeConfig) {\n      for (const [key, value] of Object.entries(themeConfig)) {\n        this.host.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const startTime = new Date(this.selectedTimeslot.start_time);\n    const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n    if (!minCancellationNotice) {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n      return;\n    }\n    const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n    if (dateTillCancellation < new Date().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  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.isLoading', 'isLoading'],\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.configSettings', 'configSettings'],\n      ['scheduler.themeConfig', 'themeConfig'],\n      ['scheduler.hour12', 'hour12'],\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      rescheduleBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'rescheduleBookedEventError', event.detail);\n      },\n      cancelBookedEventValidationError: async (event: CustomEvent<{ error: { title: string; message: string } }>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-booked-event-card', 'cancelBookedEventValidationError', event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingType = this.configSettings?.booking_type;\n    const isManualConfirmation = bookingType && bookingType !== 'booking';\n\n    return (\n      <Host part=\"nbec\">\n        <div class=\"nylas-booked-event-card\">\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                {!!this.rescheduleBookingId && !this.isLoading\n                  ? `${i18next.t('bookingRescheduled')}`\n                  : isManualConfirmation && !this.isLoading\n                    ? `${i18next.t('bookingSent')}`\n                    : `${i18next.t('bookingConfirmed')}`}\n                !\n              </h2>\n              <div class=\"card-description\" part=\"nbec__description\">\n                {isManualConfirmation ? i18next.t('bookingSentDescription') : <span>{i18next.t('bookingConfirmedDescription')}</span>}\n              </div>\n            </div>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>{i18next.t('bookingDateAndTimeHeader')}</h3>\n              <p>\n                {this.selectedTimeslot?.start_time\n                  ? capitalizeFirstLetter(\n                      formatBookedEventDate(this.selectedTimeslot?.start_time as Date, this.selectedTimezone, LANGUAGE_CODE_TO_LOCALE_MAP[this.selectedLanguage]),\n                    )\n                  : '-'}{' '}\n                <br />\n                {this.startTime} - {this.endTime}\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\n            {!isManualConfirmation && (\n              <div class=\"button-container\">\n                <div\n                  class={{\n                    'footer': true,\n                    'no-footer':\n                      (this.configSettings?.scheduler?.hide_cancellation_options && this.configSettings?.scheduler?.hide_rescheduling_options) ||\n                      this.configSettings?.booking_type === 'organizer-confirmation',\n                    'no-template-cols': !!this.configSettings?.scheduler?.hide_cancellation_options || !!this.configSettings?.scheduler?.hide_rescheduling_options,\n                  }}\n                >\n                  {!this.configSettings?.scheduler?.hide_cancellation_options && (\n                    <button-component variant={'destructive'} onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                      {`${i18next.t('cancelBookingButton')}`}\n                    </button-component>\n                  )}\n                  {!this.configSettings?.scheduler?.hide_rescheduling_options && (\n                    <button-component variant={'basic'} onClick={this.handleRescheduleButtonClicked} disabled={this.isLoading} part=\"nbec__button-outline nbec__reschedule-cta\">\n                      {`${i18next.t('rescheduleBookingButton')}`}\n                    </button-component>\n                  )}\n                </div>\n              </div>\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-booking-confirmation-redirect2.js

@@ -40,6 +40,8 @@ const NylasBookingConfirmationRedirect = proxyCustomElement(class NylasBookingCo
         this.currentRedirectUrl = '';
         this.acceptUrl = undefined;
         this.componentLoaded = false;
+        this.requiredError = '';
+        this.patternError = '';
     }
     elementNameChangedHandler(newValue) {
         debug('nylas-booking-confirmation-redirect', 'elementNameChangedHandler', newValue);
@@ -56,6 +58,8 @@ const NylasBookingConfirmationRedirect = proxyCustomElement(class NylasBookingCo
         if (newVal === oldVal)
             return;
         instance.changeLanguage(newVal);
+        this.requiredError = instance.t('fieldRequired', { field: instance.t('redirectUrl') });
+        this.patternError = instance.t('invalidInputFormat', { field: instance.t('redirectUrl') });
     }
     connectedCallback() {
         debug('nylas-booking-confirmation-redirect', 'connectedCallback');
@@ -113,8 +117,8 @@ const NylasBookingConfirmationRedirect = proxyCustomElement(class NylasBookingCo
         if (this.acceptUrl && name === 'confirmation-redirect') {
             this.redirectUrlErrorMessage = '';
             if (!isValidUrl(this.currentRedirectUrl)) {
-                this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');
-                this.redirectUrlErrorMessage = 'Please enter a valid URL.';
+                this.internals.setValidity({ customError: true }, instance.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage'));
+                this.redirectUrlErrorMessage = instance.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage');
                 return;
             }
             this.internals.setValidity({});
@@ -127,8 +131,8 @@ const NylasBookingConfirmationRedirect = proxyCustomElement(class NylasBookingCo
     }
     formSubmittedHandler(_event) {
         if (this.acceptUrl && !isValidUrl(this.currentRedirectUrl)) {
-            this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');
-            this.redirectUrlErrorMessage = 'Please enter a valid URL.';
+            this.internals.setValidity({ customError: true }, instance.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage'));
+            this.redirectUrlErrorMessage = instance.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage');
         }
         else {
             this.internals.setValidity({});
@@ -145,7 +149,7 @@ const NylasBookingConfirmationRedirect = proxyCustomElement(class NylasBookingCo
                 value: 'custom',
             },
         ];
-        return (h(Host, { key: 'cdeb8b02f983324f32eab10e0562d104e6502aaf' }, h("div", { key: '5e3acf615cebba5d2d78fbfd2c3cf6e4fe4dcd2a', class: "nylas-booking-confirmation-redirect", part: "nbcr" }, redirectOptions.length > 0 && (h("div", { class: "nylas-booking-confirmation-redirect__dropdown" }, h("span", { class: "label" }, instance.t('nylasBookingConfirmationRedirect.dropdownLabel'), h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, instance.t('nylasBookingConfirmationRedirect.tooltip.desc')))), this.componentLoaded && (h("select-dropdown", { name: "confirmation-redirect-dropdown", options: redirectOptions, withSearch: false, defaultSelectedOption: redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default')), exportparts: "sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content" })), this.acceptUrl && (h("div", null, h("input-component", { name: "confirmation-redirect", id: "confirmation-redirect", type: "text", placeholder: "Enter custom redirect URL", required: false, part: "ic__input_wrapper: nbcr__input-textfield", defaultValue: this.currentRedirectUrl }), this.redirectUrlErrorMessage && h("span", { class: "error-message" }, this.redirectUrlErrorMessage))))))));
+        return (h(Host, { key: '3f0b860be075b40c1c4c128b3300de4ecccd8057' }, h("div", { key: '75bd98cf98b22ede61543e1c6d4cb3e1a2fab868', class: "nylas-booking-confirmation-redirect", part: "nbcr" }, redirectOptions.length > 0 && (h("div", { class: "nylas-booking-confirmation-redirect__dropdown" }, h("span", { class: "label" }, instance.t('nylasBookingConfirmationRedirect.dropdownLabel'), h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, instance.t('nylasBookingConfirmationRedirect.tooltip.desc')))), this.componentLoaded && (h("select-dropdown", { name: "confirmation-redirect-dropdown", options: redirectOptions, withSearch: false, defaultSelectedOption: redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default')), exportparts: "sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content" })), this.acceptUrl && (h("div", null, h("input-component", { name: "confirmation-redirect", id: "confirmation-redirect", type: "text", placeholder: instance.t('nylasBookingConfirmationRedirect.customRedirectUrlPlaceholder'), required: false, part: "ic__input_wrapper: nbcr__input-textfield", requiredError: this.requiredError, patternError: this.patternError, defaultValue: this.currentRedirectUrl }), this.redirectUrlErrorMessage && h("span", { class: "error-message" }, this.redirectUrlErrorMessage))))))));
     }
     static get formAssociated() { return true; }
     get host() { return this; }
@@ -163,7 +167,9 @@ const NylasBookingConfirmationRedirect = proxyCustomElement(class NylasBookingCo
         "selectedLanguage": [1, "selected-language"],
         "currentRedirectUrl": [32],
         "acceptUrl": [32],
-        "componentLoaded": [32]
+        "componentLoaded": [32],
+        "requiredError": [32],
+        "patternError": [32]
     }, [[0, "nylasFormDropdownChanged", "nylasFormDropdownChangedHandler"], [0, "nylasFormInputBlurred", "nylasFormInputBlurHandler"], [4, "formSubmitted", "formSubmittedHandler"]], {
         "name": ["elementNameChangedHandler"],
         "selectedConfiguration": ["selectedConfigurationChangedHandler"],

package/dist/components/nylas-booking-confirmation-redirect2.js.map

@@ -1 +1 @@
-{"file":"nylas-booking-confirmation-redirect2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.scss?tag=nylas-booking-confirmation-redirect&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-booking-confirmation-redirect {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n\n  .nylas-booking-confirmation-redirect__dropdown {\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      margin-bottom: 4px;\n      color: var(--nylas-base-800);\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 1rem;\n    }\n\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\n\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\n\n    input-component::part(ic__input_wrapper) {\n      margin-top: 1rem;\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { isValidUrl } from '@/utils/utils';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbcr - The booking redirect container\n * @part nbcr__header - The header of the booking redirect\n * @part nbcr__dropdown - The dropdown container\n * @part nbcr__dropdown-button - The dropdown button\n * @part nbcr__dropdown-content - The dropdown content\n * @part nbcr__input-textfield - The input field content\n */\n@Component({\n  tag: 'nylas-booking-confirmation-redirect',\n  styleUrl: 'nylas-booking-confirmation-redirect.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBookingConfirmationRedirect {\n  @Element() host!: HTMLNylasBookingConfirmationRedirectElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the confirmation redirect link.\n   */\n  @Prop() name: string = 'confirmation-redirect';\n  /**\n   * @standalone\n   * The custom redirect URL.\n   */\n  @Prop() redirectUrl: string = '';\n  /**\n   * @standalone\n   * The custom redirect URL error message\n   */\n  @Prop() redirectUrlErrorMessage: string = '';\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current redirect URL.\n   */\n  @State() currentRedirectUrl: string = '';\n  /**\n   * The state for whether a custom URL can be added.\n   */\n  @State() acceptUrl!: boolean;\n\n  @State() componentLoaded: boolean = false;\n\n  /**\n   * This event is fired when the current redirect URL changes and is valid.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-booking-confirmation-redirect', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-booking-confirmation-redirect', 'selectedConfigurationChangedHandler', newValue);\n    if (newValue?.scheduler?.confirmation_redirect_url) {\n      this.currentRedirectUrl = newValue?.scheduler?.confirmation_redirect_url;\n      this.acceptUrl = newValue?.scheduler?.confirmation_redirect_url !== '';\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-booking-confirmation-redirect', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-booking-confirmation-redirect', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-booking-confirmation-redirect', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-booking-confirmation-redirect', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentRedirectUrl = this.redirectUrl;\n      this.acceptUrl = this.redirectUrl !== '';\n    }\n    this.componentLoaded = true;\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.currentRedirectUrl.toString(), this.name);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-booking-confirmation-redirect', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-booking-confirmation-redirect', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-booking-confirmation-redirect', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-booking-confirmation-redirect', 'componentDidRender');\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-booking-confirmation-redirect', 'nylasFormDropdownChangedHandler', event.detail);\n\n    const { name, value } = event.detail;\n\n    if (name === 'confirmation-redirect-dropdown') {\n      if (value === 'custom') {\n        this.acceptUrl = true;\n      } else {\n        this.acceptUrl = false;\n\n        // Submit empty string to clear redirect URL\n        this.internals.setFormValue('', this.name);\n        this.valueChanged.emit({ name: this.name, value: '' });\n      }\n    }\n  }\n\n  @Listen('nylasFormInputBlurred')\n  nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    this.currentRedirectUrl = value;\n\n    if (this.acceptUrl && name === 'confirmation-redirect') {\n      this.redirectUrlErrorMessage = '';\n\n      if (!isValidUrl(this.currentRedirectUrl)) {\n        this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');\n        this.redirectUrlErrorMessage = 'Please enter a valid URL.';\n        return;\n      }\n      this.internals.setValidity({});\n\n      // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n      const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n        const { value } = event.detail;\n        this.internals.setFormValue(value.toString(), this.name);\n      };\n      this.valueChanged.emit({ ...event.detail, valueChanged });\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'document' })\n  formSubmittedHandler(_event: CustomEvent) {\n    if (this.acceptUrl && !isValidUrl(this.currentRedirectUrl)) {\n      this.internals.setValidity({ customError: true }, 'Please enter a valid URL.');\n      this.redirectUrlErrorMessage = 'Please enter a valid URL.';\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  @RegisterComponent<NylasBookingConfirmationRedirect, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-booking-confirmation-redirect',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const redirectOptions = [\n      {\n        label: i18next.t('nylasBookingConfirmationRedirect.redirectOption', { context: 'default' }),\n        value: 'default',\n      },\n      {\n        label: i18next.t('nylasBookingConfirmationRedirect.redirectOption', { context: 'custom' }),\n        value: 'custom',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-booking-confirmation-redirect\" part=\"nbcr\">\n          {redirectOptions.length > 0 && (\n            <div class=\"nylas-booking-confirmation-redirect__dropdown\">\n              <span class=\"label\">\n                {i18next.t('nylasBookingConfirmationRedirect.dropdownLabel')}\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">{i18next.t('nylasBookingConfirmationRedirect.tooltip.desc')}</span>\n                </tooltip-component>\n              </span>\n              {this.componentLoaded && (\n                <select-dropdown\n                  name=\"confirmation-redirect-dropdown\"\n                  options={redirectOptions}\n                  withSearch={false}\n                  defaultSelectedOption={redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default'))}\n                  exportparts=\"sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content\"\n                />\n              )}\n              {this.acceptUrl && (\n                <div>\n                  <input-component\n                    name=\"confirmation-redirect\"\n                    id=\"confirmation-redirect\"\n                    type=\"text\"\n                    placeholder=\"Enter custom redirect URL\"\n                    required={false}\n                    part=\"ic__input_wrapper: nbcr__input-textfield\"\n                    defaultValue={this.currentRedirectUrl}\n                  />\n                  {this.redirectUrlErrorMessage && <span class=\"error-message\">{this.redirectUrlErrorMessage}</span>}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-booking-confirmation-redirect2.js","mappings":"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","names":["i18next"],"sources":["src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.scss?tag=nylas-booking-confirmation-redirect&encapsulation=shadow","src/components/scheduler-editor/nylas-booking-confirmation-redirect/nylas-booking-confirmation-redirect.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-booking-confirmation-redirect {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n\n  .nylas-booking-confirmation-redirect__dropdown {\n    span.label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      margin-bottom: 4px;\n      color: var(--nylas-base-800);\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n      padding: 1rem;\n    }\n\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\n\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\n\n    input-component::part(ic__input_wrapper) {\n      margin-top: 1rem;\n    }\n\n    span.error-message {\n      color: var(--nylas-error);\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\nimport { isValidUrl } from '@/utils/utils';\nimport { Configuration } from '@nylas/core';\nimport i18next from '@/utils/i18n';\nimport { LANGUAGE_CODE } from '@/common/constants';\n\n/**\n * The `nylas-booking-confirmation-redirect` component is a UI component that allows the user to choose a custom redirect URL after a booking is confirmed.\n * @part nbcr - The booking redirect container\n * @part nbcr__header - The header of the booking redirect\n * @part nbcr__dropdown - The dropdown container\n * @part nbcr__dropdown-button - The dropdown button\n * @part nbcr__dropdown-content - The dropdown content\n * @part nbcr__input-textfield - The input field content\n */\n@Component({\n  tag: 'nylas-booking-confirmation-redirect',\n  styleUrl: 'nylas-booking-confirmation-redirect.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasBookingConfirmationRedirect {\n  @Element() host!: HTMLNylasBookingConfirmationRedirectElement;\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the confirmation redirect link.\n   */\n  @Prop() name: string = 'confirmation-redirect';\n  /**\n   * @standalone\n   * The custom redirect URL.\n   */\n  @Prop() redirectUrl: string = '';\n  /**\n   * @standalone\n   * The custom redirect URL error message\n   */\n  @Prop() redirectUrlErrorMessage: string = '';\n  /**\n   * The selected language.\n   */\n  @Prop() selectedLanguage?: LANGUAGE_CODE;\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The current redirect URL.\n   */\n  @State() currentRedirectUrl: string = '';\n  /**\n   * The state for whether a custom URL can be added.\n   */\n  @State() acceptUrl!: boolean;\n\n  @State() componentLoaded: boolean = false;\n\n  @State() requiredError: string = '';\n  @State() patternError: string = '';\n\n  /**\n   * This event is fired when the current redirect URL changes and is valid.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-booking-confirmation-redirect', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Watch('selectedConfiguration')\n  selectedConfigurationChangedHandler(newValue: Configuration) {\n    debug('nylas-booking-confirmation-redirect', 'selectedConfigurationChangedHandler', newValue);\n    if (newValue?.scheduler?.confirmation_redirect_url) {\n      this.currentRedirectUrl = newValue?.scheduler?.confirmation_redirect_url;\n      this.acceptUrl = newValue?.scheduler?.confirmation_redirect_url !== '';\n    }\n  }\n\n  @Watch('selectedLanguage')\n  selectedLanguageChangedHandler(newVal: LANGUAGE_CODE, oldVal: LANGUAGE_CODE) {\n    if (newVal === oldVal) return;\n    i18next.changeLanguage(newVal);\n    this.requiredError = i18next.t('fieldRequired', { field: i18next.t('redirectUrl') });\n    this.patternError = i18next.t('invalidInputFormat', { field: i18next.t('redirectUrl') });\n  }\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-booking-confirmation-redirect', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-booking-confirmation-redirect', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-booking-confirmation-redirect', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-booking-confirmation-redirect', 'componentDidLoad');\n    if (this.selectedConfiguration) {\n      this.selectedConfigurationChangedHandler(this.selectedConfiguration);\n    } else {\n      this.currentRedirectUrl = this.redirectUrl;\n      this.acceptUrl = this.redirectUrl !== '';\n    }\n    this.componentLoaded = true;\n    if (typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(this.currentRedirectUrl.toString(), this.name);\n    }\n  }\n\n  componentWillUpdate() {\n    debug('nylas-booking-confirmation-redirect', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-booking-confirmation-redirect', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-booking-confirmation-redirect', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-booking-confirmation-redirect', 'componentDidRender');\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-booking-confirmation-redirect', 'nylasFormDropdownChangedHandler', event.detail);\n\n    const { name, value } = event.detail;\n\n    if (name === 'confirmation-redirect-dropdown') {\n      if (value === 'custom') {\n        this.acceptUrl = true;\n      } else {\n        this.acceptUrl = false;\n\n        // Submit empty string to clear redirect URL\n        this.internals.setFormValue('', this.name);\n        this.valueChanged.emit({ name: this.name, value: '' });\n      }\n    }\n  }\n\n  @Listen('nylasFormInputBlurred')\n  nylasFormInputBlurHandler(event: CustomEvent<{ value: string; name: string }>) {\n    const { name, value } = event.detail;\n    this.currentRedirectUrl = value;\n\n    if (this.acceptUrl && name === 'confirmation-redirect') {\n      this.redirectUrlErrorMessage = '';\n\n      if (!isValidUrl(this.currentRedirectUrl)) {\n        this.internals.setValidity({ customError: true }, i18next.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage'));\n        this.redirectUrlErrorMessage = i18next.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage');\n        return;\n      }\n      this.internals.setValidity({});\n\n      // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n      const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n        const { value } = event.detail;\n        this.internals.setFormValue(value.toString(), this.name);\n      };\n      this.valueChanged.emit({ ...event.detail, valueChanged });\n    }\n  }\n\n  @Listen('formSubmitted', { target: 'document' })\n  formSubmittedHandler(_event: CustomEvent) {\n    if (this.acceptUrl && !isValidUrl(this.currentRedirectUrl)) {\n      this.internals.setValidity({ customError: true }, i18next.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage'));\n      this.redirectUrlErrorMessage = i18next.t('nylasBookingConfirmationRedirect.customRedirectUrlErrorMessage');\n    } else {\n      this.internals.setValidity({});\n    }\n  }\n\n  @RegisterComponent<NylasBookingConfirmationRedirect, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-booking-confirmation-redirect',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.selectedLanguage', 'selectedLanguage'],\n    ]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const redirectOptions = [\n      {\n        label: i18next.t('nylasBookingConfirmationRedirect.redirectOption', { context: 'default' }),\n        value: 'default',\n      },\n      {\n        label: i18next.t('nylasBookingConfirmationRedirect.redirectOption', { context: 'custom' }),\n        value: 'custom',\n      },\n    ];\n\n    return (\n      <Host>\n        <div class=\"nylas-booking-confirmation-redirect\" part=\"nbcr\">\n          {redirectOptions.length > 0 && (\n            <div class=\"nylas-booking-confirmation-redirect__dropdown\">\n              <span class=\"label\">\n                {i18next.t('nylasBookingConfirmationRedirect.dropdownLabel')}\n                <tooltip-component>\n                  <info-icon slot=\"tooltip-icon\" />\n                  <span slot=\"tooltip-content\">{i18next.t('nylasBookingConfirmationRedirect.tooltip.desc')}</span>\n                </tooltip-component>\n              </span>\n              {this.componentLoaded && (\n                <select-dropdown\n                  name=\"confirmation-redirect-dropdown\"\n                  options={redirectOptions}\n                  withSearch={false}\n                  defaultSelectedOption={redirectOptions.find(option => option.value === (this.acceptUrl ? 'custom' : 'default'))}\n                  exportparts=\"sd_dropdown: nbcr__dropdown, sd_dropdown-button: nbcr__dropdown-button, sd_dropdown-content: nbcr__dropdown-content\"\n                />\n              )}\n              {this.acceptUrl && (\n                <div>\n                  <input-component\n                    name=\"confirmation-redirect\"\n                    id=\"confirmation-redirect\"\n                    type=\"text\"\n                    placeholder={i18next.t('nylasBookingConfirmationRedirect.customRedirectUrlPlaceholder')}\n                    required={false}\n                    part=\"ic__input_wrapper: nbcr__input-textfield\"\n                    requiredError={this.requiredError}\n                    patternError={this.patternError}\n                    defaultValue={this.currentRedirectUrl}\n                  />\n                  {this.redirectUrlErrorMessage && <span class=\"error-message\">{this.redirectUrlErrorMessage}</span>}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-booking-form2.js

@@ -174,6 +174,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         this.configSettings = undefined;
         this.themeConfig = undefined;
         this.selectedTimeslot = undefined;
+        this.selectedLanguage = undefined;
         this.name = '';
         this.email = '';
         this.guestEmails = [];
@@ -181,6 +182,10 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         this.isNameValid = true;
         this.isEmailValid = true;
         this.additionalFields = {};
+        this.namePatternError = '';
+        this.nameRequiredError = '';
+        this.emailPatternError = '';
+        this.emailRequiredError = '';
         this.validationError = { name: '', email: '' };
         this.backButtonLoading = false;
         this.firstRender = true;
@@ -228,6 +233,15 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
     themeConfigChanged(newThemeConfig) {
         this.applyThemeConfig(newThemeConfig);
     }
+    selectedLanguageChangedHandler(newVal, oldVal) {
+        if (newVal === oldVal)
+            return;
+        instance.changeLanguage(newVal);
+        this.namePatternError = instance.t('invalidInputFormat', { field: instance.t('name') });
+        this.nameRequiredError = instance.t('fieldRequired', { field: instance.t('name') });
+        this.emailPatternError = instance.t('invalidInputFormat', { field: instance.t('email') });
+        this.emailRequiredError = instance.t('fieldRequired', { field: instance.t('email') });
+    }
     iterateFormComponents() {
         const form = this.formRef;
         const customComponentsList = [
@@ -339,7 +353,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
     }
     render() {
         const isGroupEvent = !!this.selectedTimeslot?.event_id && !!this.selectedTimeslot?.capacity;
-        return (h(Host, { key: 'a61445ec4453e619fb5525d2089675923b7b6c95' }, h("form", { key: 'c227ed38d49928a5707b85992d37473afe424a51', onSubmit: e => this.bookButtonClickedHandler(e), ref: el => (this.formRef = el), noValidate: true }, h("div", { key: '425cbdafd7573f7c010df1a892db9d38ee54bc8a', class: "nylas-booking-form", part: "nbf" }, h("div", { key: '93506a3e9155ae24e4908265b35653701f3faf6f', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '7b54bbb3b3065785058dbdebc1f271b6b712e718', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.configSettings?.booking?.guest?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", readOnly: this.bookingInfo?.primaryParticipant?.nameReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('name') }), patternError: instance.t('invalidInputFormat', { field: instance.t('name') }), part: "nbf__input-textfield" })), h("div", { key: '2d0b8ccc0390faae5a7e29c1c2c568418bb9bad5', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '61c6bed06d612ce4f0bb366cbe675048ad6fa49e', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.configSettings?.booking?.guest?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", readOnly: this.bookingInfo?.primaryParticipant?.emailReadOnly || false, required: true, requiredError: instance.t('fieldRequired', { field: instance.t('email') }), patternError: instance.t('invalidInputFormat', { field: instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
+        return (h(Host, { key: '6659bdd250a39e69ecd8a4468b4f5bf5f3ced414' }, h("form", { key: 'ee7e0b97a449cdb18fa474bb5950ebc34922265d', onSubmit: e => this.bookButtonClickedHandler(e), ref: el => (this.formRef = el), noValidate: true }, h("div", { key: 'b59b81ef1c13449b1e49608ef6faeebbce3fef4d', class: "nylas-booking-form", part: "nbf" }, h("div", { key: 'cf75db4476ff5f8b013cbd349038a5945b9aecb0', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '9d5e5e2a2b3a64542bf7df48c0d4dc04bab2a468', label: instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.configSettings?.booking?.guest?.name || this.name, placeholder: instance.t('namePlaceholder'), type: "text", readOnly: this.bookingInfo?.primaryParticipant?.nameReadOnly || false, required: true, requiredError: this.nameRequiredError, patternError: this.namePatternError, part: "nbf__input-textfield" })), h("div", { key: 'd51c1ba6f352aaf611c04efd567d12df03adda6c', class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { key: '4fd09b511fd35c732fce53dba8d85d9f1f3e7dfd', label: instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.configSettings?.booking?.guest?.email || this.email, placeholder: instance.t('emailPlaceholder'), type: "email", readOnly: this.bookingInfo?.primaryParticipant?.emailReadOnly || false, required: true, requiredError: this.emailRequiredError, patternError: this.emailPatternError, part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("label", { class: {
                 error: !!this.guestEmailErrors[index],
             } }, instance.t('guestEmail')), h("div", { class: "guest-email-input" }, h("input", { type: "email", id: `guest-email-${index}`, maxLength: 100, class: {
                 'guest-email': true,
@@ -360,7 +374,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("select-dropdown", { label: label, name: key, id: key, readOnly: fieldReadOnly, withSearch: false, emptyValue: instance.t('nylasBookingCalendarPicker.selectOptionLabel'), defaultSelectedOption: defaultValue ? { value: defaultValue, label: defaultValue } : undefined, options: [
                             { value: '', label: instance.t('nylasBookingCalendarPicker.selectOptionLabel') },
                             ...(field.options?.map(option => ({ value: option, label: option })) || []),
-                        ], required: field.required, exportparts: "sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content" })));
+                        ], required: field.required, errorMessage: instance.t('fieldRequired', { field: label }), exportparts: "sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content" })));
                 case 'checkbox':
                     return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("checkbox-component", { readOnly: fieldReadOnly, label: label, name: key, id: key, checked: defaultValue === 'true', required: field.required, part: "nbf__checkbox-component" })));
                 case 'radio_button':
@@ -376,15 +390,16 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
                 case 'metadata':
                     return null;
                 default:
-                    return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, readOnly: fieldReadOnly, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
+                    return (h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, h("input-component", { label: label, name: key, id: key, type: field.type, readOnly: fieldReadOnly, defaultValue: defaultValue || '', requiredError: instance.t('fieldRequired', { field: label }), patternError: instance.t('invalidInputFormat', { field: label }), required: field.required, part: "nbf__input-textfield" })));
             }
-        })), h("div", { key: '808fd99c41558ea710610e70fbaac8e8c731eba6', class: "cta" }, h("button-component", { key: 'd72719799742224c3d4ab7596a287e2e3f38187e', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: '280c1674e4aa7fca3f13ec1e680cccf140f6d600', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: 'a6d1131de56b24415c5665b4d82a9af714843bb7', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: 'bc0f92e27c465efdfa67f5bda1d3b59cd4c4f389', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
+        })), h("div", { key: '903b248bb07920e75736ff3b38c142cfd9748c3e', class: "cta" }, h("button-component", { key: '967df15c0a3ce75d07f5b78a3511f0412f8e8d1d', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, h("slot", { key: 'c552facf14ba5ddecbf85f32b6976d2a19c74364', name: "booking-form-back-label" }, `${instance.t('backButton')}`)), h("button-component", { key: 'a07f122b3f9b4b89c049e868e71c993be0eb2da4', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, h("slot", { key: '91884303152748e6cdf080e32d1b78eab1fdd975', name: "booking-form-book-label" }, `${instance.t('bookNowButton')}`))))));
     }
     get host() { return this; }
     static get watchers() { return {
         "bookingInfo": ["bookingInfoChangedHandler"],
         "configSettings": ["configSettingsChangedHandler"],
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }; }
     static get style() { return NylasBookingFormStyle0; }
 }, [1, "nylas-booking-form", {
@@ -394,6 +409,7 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         "configSettings": [16],
         "themeConfig": [8, "theme-config"],
         "selectedTimeslot": [16],
+        "selectedLanguage": [1, "selected-language"],
         "name": [32],
         "email": [32],
         "guestEmails": [32],
@@ -401,13 +417,18 @@ const NylasBookingForm = proxyCustomElement(class NylasBookingForm extends HTMLE
         "isNameValid": [32],
         "isEmailValid": [32],
         "additionalFields": [32],
+        "namePatternError": [32],
+        "nameRequiredError": [32],
+        "emailPatternError": [32],
+        "emailRequiredError": [32],
         "validationError": [32],
         "backButtonLoading": [32],
         "firstRender": [32]
     }, [[0, "nylasFormInputChanged", "nylasFormInputChangedHandler"], [0, "nylasFormDropdownChanged", "selectOptionChangedHandler"], [0, "selectedOptionsChanged", "selecedOptionsChangedHandler"], [0, "nylasFormSwitchToggled", "switchToggledHandler"], [0, "nylasFormCheckboxToggled", "checkboxToggledHandler"], [0, "nylasFormRadioChanged", "radioChangedHandler"], [0, "nylasFormDropdownDefaultSelected", "dropdownDefaultSelectedHandler"]], {
         "bookingInfo": ["bookingInfoChangedHandler"],
         "configSettings": ["configSettingsChangedHandler"],
-        "themeConfig": ["themeConfigChanged"]
+        "themeConfig": ["themeConfigChanged"],
+        "selectedLanguage": ["selectedLanguageChangedHandler"]
     }]);
 __decorate([
     RegisterComponent({
@@ -419,6 +440,7 @@ __decorate([
             ['scheduler.configSettings', 'configSettings'],
             ['scheduler.themeConfig', 'themeConfig'],
             ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.selectedLanguage', 'selectedLanguage'],
         ]),
         eventToProps: {
             backButtonClicked: async (_event, nylasSchedulerConnector) => {