@nylas/web-elements 2.5.4 → 2.5.6

package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"nylas-locale-switch.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { LANGUAGE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '../../../components';\nimport type { NylasSchedulerBookingData } from '@/common/types';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, getTimezoneOffset } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/**\n * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n * @part nls - The locale switch container\n * @part nls__timezone - The timezone select container\n * @part nls__timezone-dropdown - The timezone dropdown\n * @part nls__timezone-drop-button - The timezone dropdown button\n * @part nls__timezone-drop-button-selected-label - The timezone dropdown button selected label\n * @part nls__timezone-drop-content - The timezone dropdown content\n * @part nls__timezone-drop-label - The timezone dropdown label\n * @part nls__language - The language select container\n * @part nls__language-dropdown - The language dropdown\n * @part nls__language-drop-button - The language dropdown button\n * @part nls__language-drop-content - The language dropdown content\n * @part nls__language-drop-label - The language dropdown label\n *\n */\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.scss',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  private timezoneRef?: HTMLSelectDropdownElement;\n  private languageRef?: HTMLSelectDropdownElement;\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasLocaleSwitchElement;\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n  /**\n   * @standalone\n   * The booking info.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ mutable: true }) selectedTimezone: string = this.bookingInfo?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = this.bookingInfo?.language || navigator.language;\n\n  @State() searchPlaceholder: string = i18next.t('search');\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('bookingInfo')\n  bookingInfoChangedHandler(newValue: NylasSchedulerBookingData | undefined) {\n    if (newValue && newValue?.timezone) {\n      this.changeTimezone(newValue.timezone);\n    }\n    if (newValue && newValue?.language) {\n      this.changeLanguage(newValue.language);\n    }\n  }\n\n  connectedCallback() {\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  componentDidLoad() {\n    debug(`[nylas-locale-switch] Component did load`);\n    if (this.bookingInfo && this.bookingInfo?.timezone) {\n      this.changeTimezone(this.bookingInfo.timezone);\n    }\n    if (this.bookingInfo && this.bookingInfo?.language) {\n      this.changeLanguage(this.bookingInfo.language);\n    }\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        this.timezoneRef?.style.setProperty(`${key}`, value);\n        this.languageRef?.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    this.selectedLanguage = language;\n    i18next.changeLanguage(language);\n    this.searchPlaceholder = i18next.t('search');\n    this.languageChanged.emit(language);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.changeTimezone(value);\n    } else if (name === 'language') {\n      this.changeLanguage(value);\n    }\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'timezoneChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n      languageChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'languageChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectLanguage(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n      label: LANGUAGE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\" part=\"nls\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n            part=\"nls__timezone\"\n          >\n            <select-dropdown\n              name=\"timezone\"\n              searchPlaceholder={this.searchPlaceholder}\n              options={timezoneOptions}\n              ref={el => (this.timezoneRef = el)}\n              defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}\n              exportparts=\"sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <globe-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n            part=\"nls__language\"\n          >\n            <select-dropdown\n              name=\"language\"\n              searchPlaceholder={this.searchPlaceholder}\n              options={languageOptions}\n              ref={el => (this.languageRef = el)}\n              defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}\n              exportparts=\"sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <translate-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nylas-locale-switch.js","sourceRoot":"","sources":["../../../../../src/components/scheduler/nylas-locale-switch/nylas-locale-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { LANGUAGE_CODE, LANGUAGE_MAP, TIMEZONE_MAP } from '@/common/constants';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '../../../components';\nimport type { NylasSchedulerBookingData } from '@/common/types';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, detectBrowserLanguageCode, getTimezoneOffset, normalizeSupportedLanguageCode } from '@/utils/utils';\nimport { ThemeConfig } from '@nylas/core';\nimport i18next from '@/utils/i18n';\n/**\n * The `nylas-locale-switch` component is a UI component that allows users to select a timezone and language.\n * @part nls - The locale switch container\n * @part nls__timezone - The timezone select container\n * @part nls__timezone-dropdown - The timezone dropdown\n * @part nls__timezone-drop-button - The timezone dropdown button\n * @part nls__timezone-drop-button-selected-label - The timezone dropdown button selected label\n * @part nls__timezone-drop-content - The timezone dropdown content\n * @part nls__timezone-drop-label - The timezone dropdown label\n * @part nls__language - The language select container\n * @part nls__language-dropdown - The language dropdown\n * @part nls__language-drop-button - The language dropdown button\n * @part nls__language-drop-content - The language dropdown content\n * @part nls__language-drop-label - The language dropdown label\n *\n */\n@Component({\n  tag: 'nylas-locale-switch',\n  styleUrl: 'nylas-locale-switch.scss',\n  shadow: true,\n})\nexport class NylasLocaleSwitch {\n  private timezoneRef?: HTMLSelectDropdownElement;\n  private languageRef?: HTMLSelectDropdownElement;\n  /**\n   * The host element.\n   * Used to manage the host element of the provider.\n   */\n  @Element() private host!: HTMLNylasLocaleSwitchElement;\n  /**\n   * @standalone\n   * The theme configuration.\n   */\n  @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n  /**\n   * @standalone\n   * The booking info.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop({ mutable: true }) selectedTimezone: string = this.bookingInfo?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected language.\n   */\n  @Prop({ mutable: true }) selectedLanguage: string = normalizeSupportedLanguageCode(this.bookingInfo?.language) || detectBrowserLanguageCode() || LANGUAGE_CODE.en;\n\n  @State() searchPlaceholder: string = i18next.t('search');\n\n  /**\n   * This event is fired when the timezone is changed.\n   */\n  @Event() timezoneChanged!: EventEmitter<string>;\n\n  /**\n   * This event is fired when the language is changed.\n   */\n  @Event() languageChanged!: EventEmitter<string>;\n\n  @Watch('themeConfig')\n  themeConfigChanged(newThemeConfig: ThemeConfig) {\n    this.applyThemeConfig(newThemeConfig);\n  }\n\n  @Watch('bookingInfo')\n  bookingInfoChangedHandler(newValue: NylasSchedulerBookingData | undefined) {\n    if (newValue && newValue?.timezone) {\n      this.changeTimezone(newValue.timezone);\n    }\n    if (newValue && newValue?.language) {\n      this.changeLanguage(newValue.language);\n    }\n  }\n\n  connectedCallback() {\n    // Use queueMicrotask to defer theme application until after React has set props.\n    // This fixes the timing issue where connectedCallback fires before React sets themeConfig.\n    queueMicrotask(() => {\n      if (this.themeConfig) {\n        this.applyThemeConfig(this.themeConfig);\n        this.host.setAttribute('data-themed', '');\n      }\n    });\n  }\n\n  disconnectedCallback() {}\n\n  componentWillLoad() {}\n\n  componentDidLoad() {\n    debug(`[nylas-locale-switch] Component did load`);\n    if (this.bookingInfo && this.bookingInfo?.timezone) {\n      this.changeTimezone(this.bookingInfo.timezone);\n    }\n    if (this.bookingInfo && this.bookingInfo?.language) {\n      this.changeLanguage(this.bookingInfo.language);\n    }\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        this.timezoneRef?.style.setProperty(`${key}`, value);\n        this.languageRef?.style.setProperty(`${key}`, value);\n      }\n    }\n  }\n\n  /**\n   * Change the timezone.\n   * @param timezone The timezone to select.\n   */\n  private changeTimezone(timezone: string) {\n    this.selectedTimezone = timezone;\n    this.timezoneChanged.emit(timezone);\n  }\n\n  /**\n   * Change the language.\n   * @param language The language to select.\n   */\n  private changeLanguage(language: string) {\n    const selectedLanguage = normalizeSupportedLanguageCode(language) || LANGUAGE_CODE.en;\n    this.selectedLanguage = selectedLanguage;\n    i18next.changeLanguage(selectedLanguage);\n    this.searchPlaceholder = i18next.t('search');\n    this.languageChanged.emit(selectedLanguage);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(\n    event: CustomEvent<{\n      value: string;\n      name: string;\n    }>,\n  ) {\n    const { name, value } = event.detail;\n    if (name === 'timezone') {\n      this.changeTimezone(value);\n    } else if (name === 'language') {\n      this.changeLanguage(value);\n    }\n  }\n\n  getTimezoneLabelHTML(timezone: string) {\n    const offset = getTimezoneOffset(timezone);\n    return (\n      <span\n        class=\"timezone-label\"\n        style={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          width: '-webkit-fill-available',\n        }}\n      >\n        {TIMEZONE_MAP[timezone]}{' '}\n        <span\n          class=\"timezone-offset\"\n          style={{\n            fontSize: '14px',\n            fontWeight: '400',\n            color: 'var(--nylas-base-500)',\n          }}\n        >\n          {offset}\n        </span>\n      </span>\n    );\n  }\n\n  @RegisterComponent<NylasLocaleSwitch, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-locale-switch',\n    stateToProps: new Map([\n      ['scheduler.selectedLanguage', 'selectedLanguage'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.themeConfig', 'themeConfig'],\n    ]),\n    eventToProps: {\n      timezoneChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'timezoneChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectTimezone(event.detail);\n      },\n      languageChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        debug('nylas-locale-switch', 'languageChanged', event.detail);\n        nylasSchedulerConnector.scheduler.selectLanguage(event.detail);\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const timezoneOptions = Object.keys(TIMEZONE_MAP).map(key => ({\n      labelHTML: this.getTimezoneLabelHTML(key),\n      label: TIMEZONE_MAP[key],\n      value: key,\n    }));\n    const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({\n      label: LANGUAGE_MAP[key],\n      value: key,\n    }));\n\n    return (\n      <Host>\n        <div class=\"nylas-locale-switch\" part=\"nls\">\n          <div\n            class={{\n              'select-wrapper': true,\n              'timezone': true,\n            }}\n            part=\"nls__timezone\"\n          >\n            <select-dropdown\n              name=\"timezone\"\n              searchPlaceholder={this.searchPlaceholder}\n              options={timezoneOptions}\n              ref={el => (this.timezoneRef = el)}\n              defaultSelectedOption={timezoneOptions.find(op => op.value == this.selectedTimezone)}\n              exportparts=\"sd_dropdown: nls__timezone-dropdown, sd_dropdown-button: nls__timezone-drop-button, sd_dropdown-button-selected-label: nls__timezone-drop-button-selected-label, sd_dropdown-content: nls__timezone-drop-content, sd_dropdown_label: nls__timezone-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <globe-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n          <div\n            class={{\n              'select-wrapper': true,\n              'language': true,\n            }}\n            part=\"nls__language\"\n          >\n            <select-dropdown\n              name=\"language\"\n              searchPlaceholder={this.searchPlaceholder}\n              options={languageOptions}\n              ref={el => (this.languageRef = el)}\n              defaultSelectedOption={languageOptions.find(lang => lang.value == this.selectedLanguage)}\n              exportparts=\"sd_dropdown: nls__language-dropdown, sd_dropdown-button: nls__language-drop-button, sd_dropdown-content: nls__language-drop-content, sd_dropdown_label: nls__language-drop-label\"\n            >\n              <span slot=\"select-icon\">\n                <translate-icon width=\"20\" height=\"20\" />\n              </span>\n            </select-dropdown>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -3,11 +3,11 @@ import { NylasSchedulerConnector } from "../../../connector/nylas-scheduler-conn
 import { CreateNylasSchedulerStore } from "../../../stores/scheduler-store";
 import { NotificationType } from "@nylas/core";
 import { Host, h } from "@stencil/core";
-import { addDaysToCurrentDate, capitalizeFirstLetter, compactStringToUUIDs, debug, detectBrowserLanguageCode, normalizeDateInput } from "../../../utils/utils";
+import { addDaysToCurrentDate, capitalizeFirstLetter, compactStringToUUIDs, debug, detectBrowserLanguageCode, normalizeDateInput, normalizeSupportedLanguageCode, } from "../../../utils/utils";
 import { SchedulerView } from "./scheduler-view";
 import { MessageBanner } from "./message-banner";
 import i18next from "../../../utils/i18n";
-import { LANGUAGE_CODE, LANGUAGE_MAP } from "../../../common/constants";
+import { LANGUAGE_CODE, LANGUAGE_CODE_TO_LOCALE_MAP, LANGUAGE_MAP } from "../../../common/constants";
 import * as Sentry from "@sentry/browser";
 import { ErrorCategory } from "../../../types/index";
 import { version } from "../../../version";
@@ -22,7 +22,7 @@ export class NylasScheduling {
         this.showNotification = true;
         this.enableUserFeedback = true;
         this.automaticComponentRegistration = true;
-        this.selectedDateLabel = new Date().toLocaleDateString(navigator.language, { dateStyle: 'full' }) || `${i18next.t('noDateSelected')}`;
+        this.selectedDateLabel = `${i18next.t('noDateSelected')}`;
         this.language = navigator.language;
         this.showFeedbackModal = false;
         this.bookingInfoConfirmed = null;
@@ -30,11 +30,16 @@ export class NylasScheduling {
     }
     connectedCallback() {
         debug(`[nylas-scheduler] connectedCallback`);
+        void this.schedulerApiUrlChanged;
+        void this.sessionIdChanged;
+        void this.configurationIdChanged;
+        void this.slugChanged;
+        void this.clientIdChanged;
     }
     async componentWillLoad() {
         debug(`[nylas-scheduler] Component will load`);
         this.version = version;
-        await Promise.resolve();
+        await new Promise(resolve => setTimeout(resolve, 0));
         if (this.enableUserFeedback && !Sentry.isInitialized()) {
             Sentry.init({
                 dsn: 'https://9d5731f1c77ca84c9ed3fb9b3ccf7ee1@o74852.ingest.us.sentry.io/4507889638178816',
@@ -60,13 +65,16 @@ export class NylasScheduling {
         const urlParams = new URLSearchParams(window.location.search);
         const langFromUrl = urlParams.get('lang');
         const validLanguageFromUrl = langFromUrl && Object.values(LANGUAGE_CODE).includes(langFromUrl) ? langFromUrl : null;
+        const initialSelectedLanguage = validLanguageFromUrl || this.defaultLanguage || normalizeSupportedLanguageCode(this.bookingInfo?.language) || detectBrowserLanguageCode() || LANGUAGE_CODE.en;
+        this.language = initialSelectedLanguage;
+        i18next.changeLanguage(initialSelectedLanguage);
         this.stores = {
             scheduler: CreateNylasSchedulerStore({
                 bookingInfo: this.bookingInfo,
                 nylasBranding: this.nylasBranding,
                 themeConfig: this.themeConfig,
                 hour12: this.hour12,
-                selectedLanguage: validLanguageFromUrl || this.defaultLanguage || this.bookingInfo?.language || detectBrowserLanguageCode() || LANGUAGE_CODE.en,
+                selectedLanguage: initialSelectedLanguage,
                 ...this.defaultSchedulerState,
             }),
         };
@@ -321,7 +329,7 @@ export class NylasScheduling {
     bookingInfoChanged(newVal) {
         this.stores?.scheduler.set('bookingInfo', newVal);
         if (newVal?.language && !this.defaultLanguage) {
-            this.stores?.scheduler.set('selectedLanguage', newVal.language);
+            this.stores?.scheduler.set('selectedLanguage', normalizeSupportedLanguageCode(newVal.language) || LANGUAGE_CODE.en);
         }
     }
     rescheduleBookingRefChanged(newVal) {
@@ -477,7 +485,18 @@ export class NylasScheduling {
     }
     dateSelectedHandler(event) {
         const date = normalizeDateInput(event.detail);
-        this.selectedDateLabel = date ? date.toLocaleDateString(this.language, { dateStyle: 'full' }) : `${i18next.t('noDateSelected')}`;
+        this.selectedDateLabel = date ? this.formatSelectedDateLabel(date) : `${i18next.t('noDateSelected')}`;
+    }
+    getSelectedLanguage() {
+        const selectedLanguage = this.stores?.scheduler.get('selectedLanguage') || this.defaultLanguage || detectBrowserLanguageCode() || LANGUAGE_CODE.en;
+        return normalizeSupportedLanguageCode(selectedLanguage) || LANGUAGE_CODE.en;
+    }
+    getSelectedDateLocale() {
+        const selectedLanguage = this.getSelectedLanguage();
+        return LANGUAGE_CODE_TO_LOCALE_MAP[selectedLanguage] || selectedLanguage || LANGUAGE_CODE_TO_LOCALE_MAP[LANGUAGE_CODE.en];
+    }
+    formatSelectedDateLabel(date) {
+        return capitalizeFirstLetter(date.toLocaleDateString(this.getSelectedDateLocale(), { dateStyle: 'full' }));
     }
     cancelBookedEventErrorHandler(event) {
         this.nylasSchedulerError.emit({ notification: { ...this.getErrorObject(event.detail.error) }, host: this.host });
@@ -653,13 +672,12 @@ export class NylasScheduling {
         const nylasBranding = nylasSchedulerStore?.get('nylasBranding') || this.nylasBranding;
         const selectedDate = normalizeDateInput(nylasSchedulerStore?.get('selectedDate'));
         const redirectUrl = nylasSchedulerStore?.get('configSettings')?.scheduler?.confirmation_redirect_url;
-        this.selectedDateLabel =
-            selectedDate && this.language ? capitalizeFirstLetter(selectedDate.toLocaleDateString(this.language, { dateStyle: 'full' })) : `${i18next.t('noDateSelected')}`;
         const languageOptions = Object.keys(LANGUAGE_MAP).map(key => ({
             label: LANGUAGE_MAP[key],
             value: key,
         }));
-        const selectedLanguage = nylasSchedulerStore?.get('selectedLanguage') || this.defaultLanguage || detectBrowserLanguageCode() || LANGUAGE_CODE.en;
+        const selectedLanguage = this.getSelectedLanguage();
+        const selectedDateLabel = selectedDate ? this.formatSelectedDateLabel(selectedDate) : `${i18next.t('noDateSelected')}`;
         if (showDefaultScheduler && (cancelBookingId || rejectBookingId) && !cancelledEventInfo) {
             return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancel-flow-page", part: "cancel-flow-page" }, h("nylas-cancel-booking-form", { selectedTimeslot: selectedTimeslot, cancelBookingId: cancelBookingId, rejectBookingId: rejectBookingId, exportparts: "ncbf, ncbf__icon, ncbf__title, ncbf__description, ncbf__reason-textarea, ncbf__button-cta, ncbf__button-outline, ncbf__card" }))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: i18next.t('search'), options: languageOptions, withChevron: false, themeConfig: this.themeConfig, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
@@ -716,7 +734,7 @@ export class NylasScheduling {
         }
         if (showDefaultScheduler && (!eventInfo || !!rescheduleBookingId) && !showBookingForm) {
             const timeslotPickerCTALabel = this.host.querySelector('[slot="timeslot-picker-cta-label"]');
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && h(MessageBanner, null, `${i18next.t('rescheduleTitle')}`), h("div", { class: "select-date-page", part: "select-date-page ns_select-date-page" }, h("div", { class: "left-panel", part: "ns_left-panel" }, h("nylas-date-picker", { exportparts: "ndp, ndp__title, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--disabled, ndp__date--selected, ndp__date--current-day, ndp__date--current-month" }), h("nylas-locale-switch", { exportparts: "nls, nls__timezone, nls__timezone-dropdown, nls__timezone-drop-button, nls__timezone-drop-button-selected-label, nls__timezone-drop-content, nls__timezone-drop-label, nls__language, nls__language-dropdown, nls__language-drop-button, nls__language-drop-content, nls__language-drop-label" })), h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}`, part: `ns_right-panel ${rescheduleBookingId ? 'ns_reschedule' : ''}` }, h("h2", { part: "ns_right-panel__title" }, h("calendar-icon", { part: "ns_right-panel__calendar-icon" }), h("span", { id: "selectedDate", part: "ns_right-panel__selected-date" }, this.selectedDateLabel)), h("nylas-timeslot-picker", { exportparts: "ntp, ntp__time-picker-wrapper, ntp__timeslots, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary" }, timeslotPickerCTALabel && (h("span", { slot: "timeslot-picker-cta-label" }, h("slot", { name: "timeslot-picker-cta-label" }))))))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
+            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && h(MessageBanner, null, `${i18next.t('rescheduleTitle')}`), h("div", { class: "select-date-page", part: "select-date-page ns_select-date-page" }, h("div", { class: "left-panel", part: "ns_left-panel" }, h("nylas-date-picker", { exportparts: "ndp, ndp__title, ndp__month-header, ndp__month-button, ndp__day, ndp__date, ndp__date--disabled, ndp__date--selected, ndp__date--current-day, ndp__date--current-month" }), h("nylas-locale-switch", { exportparts: "nls, nls__timezone, nls__timezone-dropdown, nls__timezone-drop-button, nls__timezone-drop-button-selected-label, nls__timezone-drop-content, nls__timezone-drop-label, nls__language, nls__language-dropdown, nls__language-drop-button, nls__language-drop-content, nls__language-drop-label" })), h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}`, part: `ns_right-panel ${rescheduleBookingId ? 'ns_reschedule' : ''}` }, h("h2", { part: "ns_right-panel__title" }, h("calendar-icon", { part: "ns_right-panel__calendar-icon" }), h("span", { id: "selectedDate", part: "ns_right-panel__selected-date" }, selectedDateLabel)), h("nylas-timeslot-picker", { exportparts: "ntp, ntp__time-picker-wrapper, ntp__timeslots, ntp__timeslot, ntp__timeslot--selected, ntp__button-primary" }, timeslotPickerCTALabel && (h("span", { slot: "timeslot-picker-cta-label" }, h("slot", { name: "timeslot-picker-cta-label" }))))))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && !eventInfo && showBookingForm) {
             return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, rescheduleBookingId && h(MessageBanner, null, `${i18next.t('rescheduleTitle')}`), h("div", { class: "additional-data-page", part: "additional-data-page ns_additional-data-page" }, h("div", { class: "left-panel ns_left-panel", part: "ns_left-panel" }, h("div", { class: "wrapper", part: "ns_left-panel__wrapper" }, h("nylas-selected-event-card", { exportparts: "nsec, nsec__card, nsec__icon, nsec__date, nsec__time, nsec__timezone" }))), h("div", { class: `right-panel ${rescheduleBookingId ? 'reschedule' : ''}`, part: `ns_right-panel ${rescheduleBookingId ? 'ns_reschedule' : ''}` }, h("nylas-booking-form", { exportparts: "nbf, nbf__input-textfield, nbf__button-ghost, nbf__button-outline, nbf__button-primary, nbf__input-wrapper, nbf__checkbox-component, nbf__radio-button-group, nbf__textarea-component, nbf__dropdown, nbf__dropdown-button, nbf__dropdown-content" })))), h("div", { class: "language-feedback-container" }, this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: e => this.onFeedbackClick(e) }, h("feedback-icon", null))), h("select-dropdown", { name: "language", searchPlaceholder: i18next.t('search'), options: languageOptions, withChevron: false, themeConfig: this.themeConfig, defaultSelectedOption: languageOptions.find(lang => lang.value == selectedLanguage), exportparts: "sd_dropdown: nse__language-dropdown, sd_dropdown-button: nse__language-drop-button, sd_dropdown-content: nse__language-drop-content, sd_dropdown_label: nse__language-drop-label" }, h("span", { slot: "select-icon" }, h("translate-icon", { width: "20", height: "20" })))), this.showFeedbackModal && h("nylas-feedback-form", null)));