@nylas/web-elements 2.0.1 → 2.0.3

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

@@ -7,7 +7,7 @@ import { addDaysToCurrentDate, capitalizeFirstLetter, compactStringToUUIDs, debu
 import { SchedulerView } from "./scheduler-view";
 import { MessageBanner } from "./message-banner";
 import i18next from "../../../utils/i18n";
-import { LANGUAGE_CODE } from "../../../common/constants";
+import { LANGUAGE_CODE, LANGUAGE_MAP } from "../../../common/constants";
 import * as Sentry from "@sentry/browser";
 import { ErrorCategory } from "../../../types/index";
 const genericError = { title: i18next.t('genericErrorTitle'), type: NotificationType.Error, category: ErrorCategory.Component };
@@ -29,6 +29,7 @@ export class NylasScheduling {
         this.isLoading = undefined;
         this.themeConfig = undefined;
         this.localization = undefined;
+        this.defaultLanguage = undefined;
         this.showNotification = true;
         this.enableUserFeedback = true;
         this.hour12 = undefined;
@@ -68,12 +69,16 @@ export class NylasScheduling {
                 return;
             }
         }
+        const urlParams = new URLSearchParams(window.location.search);
+        const langFromUrl = urlParams.get('lang');
+        const validLanguageFromUrl = langFromUrl && Object.values(LANGUAGE_CODE).includes(langFromUrl) ? langFromUrl : null;
         this.stores = {
             scheduler: CreateNylasSchedulerStore({
                 bookingInfo: this.bookingInfo,
                 nylasBranding: this.nylasBranding,
                 themeConfig: this.themeConfig,
                 hour12: this.hour12,
+                selectedLanguage: validLanguageFromUrl || this.defaultLanguage || this.bookingInfo?.language || LANGUAGE_CODE.en,
                 ...this.defaultSchedulerState,
             }),
         };
@@ -205,6 +210,9 @@ export class NylasScheduling {
     }
     bookingInfoChanged(newVal) {
         this.stores?.scheduler.set('bookingInfo', newVal);
+        if (newVal?.language && !this.defaultLanguage) {
+            this.stores?.scheduler.set('selectedLanguage', newVal.language);
+        }
     }
     rescheduleBookingRefChanged(newVal) {
         if (newVal) {
@@ -241,6 +249,12 @@ export class NylasScheduling {
             i18next.addResourceBundle(lang, 'translation', newVal[lang], false, true);
         });
     }
+    defaultLanguageChanged(newVal) {
+        if (newVal) {
+            this.stores?.scheduler.set('selectedLanguage', newVal);
+            i18next.changeLanguage(newVal);
+        }
+    }
     themeConfigChanged(newVal) {
         this.baseProvider?.getStore('scheduler')?.set('themeConfig', newVal);
         this.applyThemeConfig(newVal);
@@ -476,6 +490,14 @@ export class NylasScheduling {
     redirectToCustomUrl(url) {
         window.location.assign(url);
     }
+    nylasFormDropdownChangedHandler(event) {
+        const { name, value } = event.detail;
+        if (name === 'language') {
+            const selectedLanguage = LANGUAGE_CODE[value];
+            i18next.changeLanguage(selectedLanguage);
+            this.stores?.scheduler?.set('selectedLanguage', selectedLanguage);
+        }
+    }
     render() {
         const showDefaultScheduler = this.mode === 'app';
         const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
@@ -493,17 +515,22 @@ export class NylasScheduling {
         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 || navigator.language || LANGUAGE_CODE.en;
         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" }))), 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 }, 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, 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)));
         }
         if (showDefaultScheduler && organizerConfirmationBookingId) {
-            return (h(Host, null, h(SchedulerView, null, h("div", { class: "manual-confirmation-page", part: "manual-confirmation-page" }, h("nylas-organizer-confirmation-card", { organizerConfirmationBookingId: organizerConfirmationBookingId, exportparts: "nmcc, nmcc__title, nmcc__description, nmcc__button-cta, nmcc__button-outline" }))), 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, null, h("div", { class: "manual-confirmation-page", part: "manual-confirmation-page" }, h("nylas-organizer-confirmation-card", { organizerConfirmationBookingId: organizerConfirmationBookingId, exportparts: "nmcc, nmcc__title, nmcc__description, nmcc__button-cta, nmcc__button-outline" }))), 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, 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)));
         }
         if (showDefaultScheduler && cancelledEventInfo) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, h("nylas-cancelled-event-card", { cancelledEventInfo: cancelledEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), 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 }, h("div", { class: "cancelled-event-page", part: "cancelled-event-page" }, h("nylas-cancelled-event-card", { cancelledEventInfo: cancelledEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__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, 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)));
         }
         if (showDefaultScheduler && confirmedEventInfo) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancelled-event-page", part: "confirmed-event-page" }, h("nylas-confirmed-event-card", { confirmedEventInfo: confirmedEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), 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 }, h("div", { class: "cancelled-event-page", part: "confirmed-event-page" }, h("nylas-confirmed-event-card", { confirmedEventInfo: confirmedEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__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, 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)));
         }
         if (showDefaultScheduler && eventInfo && redirectUrl) {
             const recipient = this.bookingInfoConfirmed?.primaryParticipant;
@@ -541,14 +568,14 @@ export class NylasScheduling {
             return;
         }
         if (showDefaultScheduler && eventInfo) {
-            return (h(Host, null, h(SchedulerView, { version: this.version, nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "booked-event-page", part: "booked-event-page ns_booked-event-page" }, h("nylas-booked-event-card", { selectedTimeslot: selectedTimeslot, eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" }))), 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 }, h("div", { class: "booked-event-page", part: "booked-event-page ns_booked-event-page" }, h("nylas-booked-event-card", { selectedTimeslot: selectedTimeslot, eventInfo: eventInfo, exportparts: "nbec, nbec__title, nbec__card, nbec__description, nbec__button-outline, nbec__cancel-cta, nbec__reschedule-cta" }))), 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, 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)));
         }
         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)));
         }
         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" })))), 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: "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, 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)));
         }
         return (h(Host, null, h("slot", null)));
     }
@@ -879,6 +906,29 @@ export class NylasScheduling {
                     "text": "This prop will allow to override the default localization strings for each language.\nNylas scheduling page currently support the following language codes: en, es, fr, de, sv, zh, ja, nl."
                 }
             },
+            "defaultLanguage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LANGUAGE_CODE",
+                    "resolved": "LANGUAGE_CODE.de | LANGUAGE_CODE.en | LANGUAGE_CODE.es | LANGUAGE_CODE.fr | LANGUAGE_CODE.ja | LANGUAGE_CODE.ko | LANGUAGE_CODE.nl | LANGUAGE_CODE.sv | LANGUAGE_CODE.zh | undefined",
+                    "references": {
+                        "LANGUAGE_CODE": {
+                            "location": "import",
+                            "path": "@/common/constants",
+                            "id": "src/common/constants.ts::LANGUAGE_CODE"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This prop will allow to set a default language for the Nylas scheduling page."
+                },
+                "attribute": "default-language",
+                "reflect": false
+            },
             "showNotification": {
                 "type": "boolean",
                 "mutable": false,
@@ -1222,6 +1272,9 @@ export class NylasScheduling {
             }, {
                 "propName": "localization",
                 "methodName": "localizationChanged"
+            }, {
+                "propName": "defaultLanguage",
+                "methodName": "defaultLanguageChanged"
             }, {
                 "propName": "themeConfig",
                 "methodName": "themeConfigChanged"
@@ -1306,6 +1359,12 @@ export class NylasScheduling {
                 "target": undefined,
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "nylasFormDropdownChanged",
+                "method": "nylasFormDropdownChangedHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }