npm - @nylas/web-elements - Versions diffs - 1.1.0-canary.16 → 1.1.0-canary.17 - Mend

@nylas/web-elements 1.1.0-canary.16 → 1.1.0-canary.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (672) hide show

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.js CHANGED Viewed

@@ -22,6 +22,7 @@ export class NylasAvailabilityPicker {
         this.openHours = undefined;
         this.name = 'availability';
         this.defaultTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+        this.hideHeader = false;
         this.schedule = {
             SUN: [],
             MON: [{ start: '09:00am', end: '05:00pm' }],
@@ -39,20 +40,13 @@ export class NylasAvailabilityPicker {
         this.host.setAttribute('name', newValue);
     }
     configChangedHandler(newConfig) {
-        const organizer = newConfig?.participants?.find(p => p.is_organizer);
-        if (organizer && organizer?.availability?.open_hours) {
-            this.openHoursToSchedule(organizer?.availability?.open_hours);
+        const defaultOpenHours = newConfig?.availability?.availability_rules?.default_open_hours;
+        if (defaultOpenHours) {
+            this.openHoursToSchedule(defaultOpenHours);
         }
     }
     scheduleChanged(newValue, oldValue) {
         if (newValue !== oldValue) {
-            this.valueChanged.emit({
-                value: {
-                    openHours: this.scheduleToOpenHours(newValue),
-                    timezone: this.timezone,
-                },
-                name: this.name,
-            });
             let overlapDays = {};
             Object.keys(newValue).forEach(key => {
                 const dayTimeRanges = newValue[key];
@@ -81,6 +75,13 @@ export class NylasAvailabilityPicker {
                     timezone: this.timezone,
                 }));
             }
+            this.valueChanged.emit({
+                value: JSON.stringify({
+                    openHours: this.scheduleToOpenHours(newValue),
+                    timezone: this.timezone,
+                }),
+                name: this.name,
+            });
         }
     }
     nylasFormDropdownChangedHandler(event) {
@@ -90,10 +91,15 @@ export class NylasAvailabilityPicker {
             if (typeof this.internals.setFormValue !== 'function') {
                 return;
             }
-            this.internals.setFormValue(JSON.stringify({
+            const updateValue = {
                 openHours: this.scheduleToOpenHours(this.schedule),
                 timezone: this.timezone,
-            }));
+            };
+            this.internals.setFormValue(JSON.stringify(updateValue));
+            this.valueChanged.emit({
+                value: JSON.stringify(updateValue),
+                name: this.name,
+            });
         }
     }
     connectedCallback() {
@@ -114,10 +120,15 @@ export class NylasAvailabilityPicker {
         if (typeof this.internals.setFormValue !== 'function') {
             return;
         }
-        this.internals.setFormValue(JSON.stringify({
+        const updateValue = {
             openHours: this.scheduleToOpenHours(this.schedule),
             timezone: this.timezone,
-        }));
+        };
+        this.internals.setFormValue(JSON.stringify(updateValue));
+        this.valueChanged.emit({
+            value: JSON.stringify(updateValue),
+            name: this.name,
+        });
     }
     getOverlaps(timeRanges) {
         let timeRangesInMinutes = timeRanges.map((range, index) => ({
@@ -287,7 +298,7 @@ export class NylasAvailabilityPicker {
             label: TIMEZONE_MAP[key],
             value: key,
         }));
-        return (h(Host, { key: 'c032e8a3630fe918533895156285e4b37778d812' }, h("div", { key: '1582bd8c1f3ef09d793a7120dafb6c7d420c3e9a', class: "nylas-availability-picker" }, h("div", { key: '61f2c1de7921e15455d7b827379e7d4815f6fb13', class: "header", part: "nap__header" }, h("h3", { key: '238b0ab77477d06a62412fed051d5641924e46d4' }, "General availability"), h("p", { key: '81967b68c5077941a5bf3d055c9be9e41d4ae705' }, "Set your availability for scheduling meetings.")), h("div", { key: 'f1da5a939c1459bd7e9833cf9a97add09d75a822', class: "content" }, h("div", { key: '71e2f859541bd4fb2a4485f3350db5d6bbf73b00', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: 'a136696a498fb1521d4d8d844b9b03e2e49ff93a', class: "sub-header" }, "Select timezone", h("span", { key: '52636e30a6dea12cb69d55bd258ed48837826c80', class: "icon" }, h("tooltip-component", { key: '9f0dbc8c234f3550e83bbce3226346981b764896' }, h("info-icon", { key: 'a8f556694bd02b710c89242a3d3057de5b7b0612', slot: "tooltip-icon" }), h("span", { key: 'a8a52dd9835c32becbae165fa972bf6be6e716fa', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: '4800272cc24dcd24c82a4a89f24131c11e528d8c', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: '8b072e23cd0130f203696f5c99baaad07b1bbb2e', slot: "select-icon" }, h("globe-icon", { key: 'de4c7ef153bff887947d73ed458aa5de0786b576', width: "20", height: "20" })))), h("div", { key: '6234933a0307c253e33ad9242e06c71388ba7a0a', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
+        return (h(Host, { key: '81c6118e501f4424ce74cb81530a67f7896a7fca' }, h("div", { key: '6dbcda74a92e36089dfda5b11469c6619bb095e1', class: "nylas-availability-picker", part: "nap" }, !this.hideHeader && (h("div", { class: "header", part: "nap__header" }, h("h3", null, "General availability"), h("p", null, "Set your availability for scheduling meetings."))), h("div", { key: 'f217b53a7ddc2d0554a3c3e44e79580924dbaa43', class: "content" }, h("div", { key: 'fe3dcc1c1c5504e65babb72f7b92f7954e3d4a20', class: "select-timezone", part: "nap__select-timezone" }, h("h4", { key: '0746b7a08e56b8d2359ae37357b46b84b440851c', class: "sub-header" }, "Select timezone", h("span", { key: 'f6d5424b939bec04d0ab01e3b037a5db6ffdbb77', class: "icon" }, h("tooltip-component", { key: '7f6371d4e3ee3ab8c841d3799fbe77a1206084eb' }, h("info-icon", { key: 'ae2b6f45b9eba0c26909b283daceafeddefc7936', slot: "tooltip-icon" }), h("span", { key: '38cb9c51f61d0087216660e5b2a54f42a42663ae', slot: "tooltip-content" }, "Select your timezone for displaying availability.")))), h("select-dropdown", { key: 'e3467d03d104fe090d776bc03306d289de53cb60', name: "timezone", exportparts: "sd_dropdown: nap__timezone-container, sd_dropdown-button: nap__timezone-button, sd_dropdown-content: nap__timezone-dropdown-content", options: timezoneOptions, defaultSelectedOption: timezoneOptions.find(i => i.value === this.defaultTimezone) }, h("span", { key: 'afbee8547454b8eb1ba75a41056e1393fd60c2ec', slot: "select-icon" }, h("globe-icon", { key: '7bc82d7454658d2d0783a7d9422b76fb4083d14f', width: "20", height: "20" })))), h("div", { key: '2fd561856ac6731c16da239cd296545e256dd12d', class: "availability", part: "nap__availability" }, Object.keys(this.schedule).map(key => {
             const day = key;
             const timeRanges = this.schedule[key];
             return (h("div", { class: "availability-day" }, h("div", { class: "day", part: "nap__day" }, h("input", { type: "checkbox", name: day, id: day, checked: timeRanges.length > 0, onClick: () => {
@@ -398,6 +409,24 @@ export class NylasAvailabilityPicker {
                 "attribute": "default-timezone",
                 "reflect": false,
                 "defaultValue": "Intl.DateTimeFormat().resolvedOptions().timeZone"
+            },
+            "hideHeader": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hide the header of the availability picker."
+                },
+                "attribute": "hide-header",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
@@ -417,18 +446,12 @@ export class NylasAvailabilityPicker {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "This event is fired when the selected availability / open hours change."
+                    "text": "This event is fired when the selected availability / open hours change.\nThe value is a stringified JSON object with the open hours and timezone.\nEx: {\n  openHours: OpenHours[];\n  timezone: string;\n};"
                 },
                 "complexType": {
-                    "original": "{\n    value: {\n      openHours: OpenHours[];\n      timezone: string;\n    };\n    name: string;\n  }",
-                    "resolved": "{ value: { openHours: OpenHours[]; timezone: string; }; name: string; }",
-                    "references": {
-                        "OpenHours": {
-                            "location": "local",
-                            "path": "/home/runner/work/nylas/nylas/packages/nylas-web-elements/src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx",
-                            "id": "src/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.tsx::OpenHours"
-                        }
-                    }
+                    "original": "{\n    value: string;\n    name: string;\n  }",
+                    "resolved": "{ value: string; name: string; }",
+                    "references": {}
                 }
             }];
     }

package/dist/collection/components/scheduler-editor/nylas-availability-picker/nylas-availability-picker.js.map CHANGED Viewed

package/dist/collection/components/scheduler-editor/nylas-cancellation-policy/nylas-cancellation-policy.js CHANGED Viewed

@@ -53,7 +53,7 @@ export class NylasCancellationPolicy {
         this.valueChanged.emit({ value: value, name: this.name });
     }
     render() {
-        return (h(Host, { key: '34cd25b32015d276305a1655cec0e7d943189a4d' }, h("div", { key: '811fd581db9ce4c0aa80dceca9e66d00d1cafb7d', class: "nylas-cancellation-policy", part: "ncpolicy" }, h("label", { key: 'c6693d8f18794177754e708ef725c237f92455d7', htmlFor: this.name }, "Cancellation policy message", h("span", { key: '5c0d9238690e368b63c099625277b85734be5b5c', class: "label-icon" }, h("tooltip-component", { key: '031d9a347cdd9a349747e87ffe68ea0ba611f96f' }, h("info-icon", { key: 'f4e086eb34bfb3eb4fb1997b1047ba22e865f1bc', slot: "tooltip-icon" }), h("span", { key: 'b8dfa32c6c5505561049b0ad2b177c0a912142bf', slot: "tooltip-content" }, "Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.")))), h("textarea", { key: '2d92b92f7a30f58d0307915293000e4de337808d', id: this.name, part: "ncpolicy__textarea", name: this.name, value: this.message, maxlength: "250", onInput: e => this.handleChange(e) }))));
+        return (h(Host, { key: '9ad194925cfb18c323d3f75aec51c4ac5ad67230' }, h("div", { key: 'a4ae061a504a0cd6a91dd6dd23adcf7c3b8f43d5', class: "nylas-cancellation-policy", part: "ncpolicy" }, h("label", { key: 'ea742ee8fba2e50a5694c210172e8783fa3d5e7b', htmlFor: this.name }, "Cancellation policy message", h("span", { key: '5c7143f8da100b650aa386c9fb895c3fd9ed2e04', class: "label-icon" }, h("tooltip-component", { key: 'f46c7b94a1a58bd7162e5cfffc14a88b04a18a4c' }, h("info-icon", { key: '9d85ce578da1db7b080f3152b8fdb43834968829', slot: "tooltip-icon" }), h("span", { key: '0e4d0c4f98d1529179622c22fa6bf9d56d085ffb', slot: "tooltip-content" }, "Attendees receive this message if trying to cancel the event. Attendees are asked to provide a reason for cancellation.")))), h("textarea", { key: '570404ef8450c4ef2bb28fad4d1c6359b735abae', id: this.name, part: "ncpolicy__textarea", name: this.name, value: this.message, maxlength: "250", onInput: e => this.handleChange(e) }))));
     }
     static get is() { return "nylas-cancellation-policy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-custom-booking-flow/nylas-custom-booking-flow.js CHANGED Viewed

@@ -81,7 +81,7 @@ export class NylasCustomBookingFlow {
                 value: 'pre-booking',
             },
         ];
-        return (h(Host, { key: '21319a4631f1c0990936623d6458ad80c424e508' }, h("div", { key: '314ed4bd9b3057d209825cd93b3bcdde32c00a0d', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: 'ce531904154c284cd4692ab3e31564be5fe826b1', class: "header", part: "ncbf__header" }, h("h3", { key: '403ef6532fcf5b0ecd79944a02aa287537c677e1' }, "Customize booking flow"), h("p", { key: 'c8a5fb5fb02b7b4687778654b91b983ca210a0da' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
+        return (h(Host, { key: '6202233ce5955be9542db05e648ef2ea2d8c45c2' }, h("div", { key: '990ca595cc8f541902a4bccc7b0bf7f9f029c32a', class: "nylas-custom-booking-flow", part: "ncbf" }, h("div", { key: 'fc8e126be280ce56f968b4759ce549ebfcba5883', class: "header", part: "ncbf__header" }, h("h3", { key: 'b08624ee0a3fbb31c136be140e7c63d2862ae55d' }, "Customize booking flow"), h("p", { key: '0a21993fc37169030332858b01a6b4a4ad838424' }, "Customize how new bookings are handled when a booking is completed.")), bookingOptions.length > 0 ? (h("div", { class: "nylas-custom-booking-flow__dropdown" }, h("span", { class: "label" }, "After a booking is confirmed", h("tooltip-component", null, h("info-icon", { slot: "tooltip-icon" }), h("span", { slot: "tooltip-content" }, "Choose how you\u2019d like to handle new bookings. If you choose to manually confirm/decline bookings, you will be able to review and accept or decline each booking request."))), h("select-dropdown", { name: "booking-type", options: bookingOptions, withSearch: false, exportparts: "sd_dropdown: ncbf__dropdown, sd_dropdown-button: ncbf__dropdown-button, sd_dropdown-content: ncbf__dropdown-content", defaultSelectedOption: bookingOptions.find(cal => cal.value == this.bookingType) ?? bookingOptions[0] }))) : (h("div", { class: "nylas-custom-booking-flow__loading" }, h("span", { class: "label" }, "Select a calendar to book meetings on ", h("info-icon", null)), h("div", { class: "loading-button" }, h("span", null, "Loading...")))))));
     }
     static get is() { return "nylas-custom-booking-flow"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-customize-booking-settings/nylas-customize-booking-settings.js CHANGED Viewed

@@ -89,7 +89,7 @@ export class NylasCustomizeBookingSettings {
         }), this.name);
     }
     render() {
-        return (h(Host, { key: '289e0e8ff03e0f033bdedc44a66002d971a01a4a' }, h("div", { key: '198e4e31a02a362c393b0b9395c7ab884dd04928', class: "nylas-customize-booking-settings", part: "ncbs" }, h("div", { key: '4ac0939989b64eec0f4cbe6eebe4132be85112d0', class: "header", part: "ncbs__header" }, h("h3", { key: 'a64955a52821d22f1afab025bf18b0505d0aebcd' }, "Additional settings"), h("p", { key: '413d26d3102c624acd77f1b2d6aaa01e9abf8240' }, "Booking settings for the event.")), h("div", { key: 'e6ddf5653c6188773f59dbd6ca683cf2e5bd2c1d', class: "nylas-customize-booking-settings__settings", part: "ncbs__settings" }, h("div", { key: '47ec40306877e710bc53494e0cb23bd17ec1c803', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__additional_guests" }, h("checkbox-component", { key: '9e5a9452ff0ffe8b590702b91d8dba82512db6cf', name: "hide_additional_guests", label: "Allow guests to invite additional guests.", checked: this.allowGuestsToInvite }, h("span", { key: 'f32cc44ad67e2f135a7581fc72772c156a4f2df6', slot: "label", class: "label" }, h("p", { key: '314d47c72d9a76cca9e94e11bf785b61c6786a48', class: "label-contents" }, "Allow guests to invite additional guests to the booking."), h("tooltip-component", { key: 'd286d724e35b7a8c82c65f42923646c09462fadf', id: "guests" }, h("info-icon", { key: '1feafcf384686c0613c0fe764c09db5b7c1ddae8', slot: "tooltip-icon" }), h("span", { key: '0f17b5425ed3663184150933a86e406a197b18fa', slot: "tooltip-content" }, "Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses."))))), h("div", { key: '340b0fcd9d6f263550c347f2a87229a86c674cae', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__rescheduling_options" }, h("checkbox-component", { key: '2453ac1996fd178d363a712b4d378591be3ee32a', name: "hide_rescheduling_options", label: "Hide 'Reschedule' option on booking page and emails.", checked: this.hideReschedulingOptions }, h("span", { key: '2420f028dc654f9a8ce01ec9a924f7e0694da05b', slot: "label", class: "label" }, h("p", { key: '31bdc2ff59f7cef6ebd1c21329e34e001bfb6235', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: '76ecdab15e2fdb90dd1c34f826f0392b145291dc' }, "Reschedule"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: '489a219e2854cd6aae0df6ec8064d262e74a4dfd', id: "reschedule" }, h("info-icon", { key: '6e727527c025b00ae8907a9381fa45f2b30c325b', slot: "tooltip-icon" }), h("span", { key: '732c2be03c7a37d1ba80d99315c462ec65f24406', slot: "tooltip-content" }, "Hide the 'Reschedule' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to reschedule the booking."))))), h("div", { key: '4b92782d796cd57802c333e72cce4cb56c2424b5', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__cancellation_options" }, h("checkbox-component", { key: 'c27bb8a583f782659c7a8c3fb6320f9bc653f005', name: "hide_cancellation_options", label: "Hide 'Cancel' option on booking page and emails.", checked: this.hideCancellationOptions }, h("span", { key: '9feb0f1f1c9cfc9438317ac1e860265b0365d73c', slot: "label", class: "label" }, h("p", { key: 'e5a072e8381efdd81d96cda680bce8408699988e', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: '7451a2ffc3815301afe3c8c6ae80ecaf7f16075f' }, "Cancel"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: '12ba9c92d34cb63dc3ce23b2ab9b00c54e83afd4', id: "cancel" }, h("info-icon", { key: '159518806d8f14c1b9a6b4b36877d3174883bd7d', slot: "tooltip-icon" }), h("span", { key: '075096f27117b4318f883efe2b523c394394e230', slot: "tooltip-content" }, "Hide the 'Cancel' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to cancel the booking.")))))))));
+        return (h(Host, { key: '98e7ab408f5d7dff71321819cbc2a5e336ca52de' }, h("div", { key: 'ea73803234b4843cf7e58dc2570171e0237ea7d1', class: "nylas-customize-booking-settings", part: "ncbs" }, h("div", { key: '9b081de7e2d2152b874a5a4713a5313c6e021409', class: "header", part: "ncbs__header" }, h("h3", { key: '976be7412b4f8d70269c3b429652fa1091da1457' }, "Additional settings"), h("p", { key: 'f580ed5fd9c29773715bf26f5dc0c466c56ba43f' }, "Booking settings for the event.")), h("div", { key: '9e694bcf133167fa12efbd46bee02158b56e9777', class: "nylas-customize-booking-settings__settings", part: "ncbs__settings" }, h("div", { key: '39d4154e12c7f5cf96f04ca3fc3e0f17d0e8b2ec', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__additional_guests" }, h("checkbox-component", { key: '61f11b632388d036622078f76f2d90370458b152', name: "hide_additional_guests", label: "Allow guests to invite additional guests.", checked: this.allowGuestsToInvite }, h("span", { key: '14573cca344d64ddfddebe6f402321a52fcce6ee', slot: "label", class: "label" }, h("p", { key: '64790dee39a090a778479a7eb3b1efcd14054bb9', class: "label-contents" }, "Allow guests to invite additional guests to the booking."), h("tooltip-component", { key: '564c56d4f159e11bf82b02eaab43b36ef9dd7117', id: "guests" }, h("info-icon", { key: 'a442aac8c9d930dc6be00a07fb6cd32b39cbd24b', slot: "tooltip-icon" }), h("span", { key: '6a9eff50392213a42be00c99f0f78d5e2d8eb0f4', slot: "tooltip-content" }, "Allow guests to invite additional guests to the event. If enabled, the guest will be able to add additional guests' email addresses."))))), h("div", { key: 'e7d58c8c04cd715bd02fd4dcc14073ce1f6aaf08', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__rescheduling_options" }, h("checkbox-component", { key: '3f5c22d363bb11012b8514f5a33871a3f054fc80', name: "hide_rescheduling_options", label: "Hide 'Reschedule' option on booking page and emails.", checked: this.hideReschedulingOptions }, h("span", { key: '2ed45b907aa847c41da5a0e394b0b5ddb91a3e26', slot: "label", class: "label" }, h("p", { key: 'a1fc109c7211d387426d66ac9129fad25032565b', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: 'ac79eec03a85d1963ac4e75b0fbf678f4a063776' }, "Reschedule"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: 'd8f41e37b915c0be9154a475da07d5ed343d96b4', id: "reschedule" }, h("info-icon", { key: 'fbb3f300f4276bd249f9cf12d11c4b6467c82247', slot: "tooltip-icon" }), h("span", { key: '689b3c36070c26e6d6bac530a56008404354e43b', slot: "tooltip-content" }, "Hide the 'Reschedule' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to reschedule the booking."))))), h("div", { key: 'f21aeca85fbb63da4d844d37cf87ff1e8d48f001', class: "nylas-customize-booking-settings__settings-div", part: "ncbs__settings-div , ncbs__cancellation_options" }, h("checkbox-component", { key: 'be80ca87a198de83451085fceca77b4d2455357d', name: "hide_cancellation_options", label: "Hide 'Cancel' option on booking page and emails.", checked: this.hideCancellationOptions }, h("span", { key: '80e718e75b94562d3b8c4a3d9f170ee2de0c2c1b', slot: "label", class: "label" }, h("p", { key: 'd46dfe25aa86b112f5c57abe3337de6d88a79c90', class: "label-contents" }, "Hide the\u00A0", h("strong", { key: 'ac243fbb7a3c85c8ab3af28b61ae2724c428ac3e' }, "Cancel"), "\u00A0button on the Scheduling Page and in the email notifications."), h("tooltip-component", { key: 'b720fc3becba6ca2cc71d01bb77c19ec154b1aa1', id: "cancel" }, h("info-icon", { key: '5ab491a0734fe525ad2be3e2ad067cb292cce182', slot: "tooltip-icon" }), h("span", { key: '4621e731c10b515294641be4f9ee60142b46f9c6', slot: "tooltip-content" }, "Hide the 'Cancel' button on the Scheduling page and in the email notifications. If enabled, the guest will not be able to cancel the booking.")))))))));
     }
     static get is() { return "nylas-customize-booking-settings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js CHANGED Viewed

@@ -32,8 +32,7 @@ export class NylasEditorTabs {
             this.isLoading = true;
             this.hasUnsavedChanges = false;
             const formState = this.updateFormState();
-            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, } = formState;
-            const organizer = this.selectedConfiguration?.participants?.find(p => p.is_organizer);
+            const { title, description, duration, availability, calendarIds, bookingCalendar, location, bookingType, buffer, availableDaysInFuture, minCancellationNotice, minBookingNotice, cancellationPolicy, timeslotInterval, additionalGuestsHidden, hideCancellationOptions, hideReschedulingOptions, participants, participantOpenHours, } = formState;
             const durationMinutes = duration ? parseInt(duration) : 30;
             const configObject = {
                 ...(this.selectedConfiguration?.id && { id: this.selectedConfiguration.id }),
@@ -45,24 +44,34 @@ export class NylasEditorTabs {
                     availability_rules: {
                         availability_method: this.selectedConfiguration?.availability?.availability_rules?.availability_method ?? 'collective',
                         buffer: buffer || { before: 0, after: 0 },
-                        default_open_hours: this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
+                        default_open_hours: availability?.openHours ?? this.selectedConfiguration?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
                         round_robin_group_id: this.selectedConfiguration?.availability?.availability_rules?.round_robin_group_id ?? '',
                     },
                 },
                 participants: [
-                    {
-                        name: organizer?.name ?? organizer?.email ?? this.currentUser?.name ?? this.currentUser?.email ?? '',
-                        email: organizer?.email ?? this.currentUser?.email ?? '',
-                        is_organizer: true,
-                        availability: {
-                            calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
-                            open_hours: availability?.openHours ?? [],
-                        },
-                        booking: {
-                            calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
-                        },
-                    },
-                    ...(participants ?? []),
+                    ...(participants?.map(p => {
+                        if (p.is_organizer) {
+                            return {
+                                name: p.name ?? p.email,
+                                email: p.email,
+                                is_organizer: true,
+                                availability: {
+                                    calendar_ids: calendarIds?.length ? calendarIds : ['primary'],
+                                    open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
+                                },
+                                booking: {
+                                    calendar_id: bookingCalendar && bookingCalendar !== '' ? bookingCalendar : 'primary',
+                                },
+                            };
+                        }
+                        return {
+                            ...p,
+                            availability: {
+                                calendar_ids: p.availability?.calendar_ids ?? ['primary'],
+                                open_hours: participantOpenHours?.[p.email] ?? p.availability?.open_hours ?? [],
+                            },
+                        };
+                    }) ?? []),
                 ],
                 event_booking: {
                     title: title?.toString() ?? '',
@@ -133,7 +142,8 @@ export class NylasEditorTabs {
     handleValueChanged(event) {
         debug('[nylas-editor-tabs]', 'handleValueChanged', event);
         const { name, value } = event.detail;
-        this.formState = { ...this.formState, [name]: value };
+        this.setFormState(value, name);
+        this.formState = { ...this.formState };
         this.hasUnsavedChanges = true;
         this.error = '';
     }
@@ -145,7 +155,7 @@ export class NylasEditorTabs {
             duration: config?.availability?.duration_minutes?.toString() ?? '30',
             availability: {
                 timezone: config?.event_booking?.timezone ?? Intl.DateTimeFormat().resolvedOptions().timeZone,
-                openHours: organizerParticipant?.availability?.open_hours,
+                openHours: config?.availability?.availability_rules?.default_open_hours ?? DEFAULT_OPEN_HOURS,
             },
             calendarIds: organizerParticipant?.availability?.calendar_ids ?? [],
             participants: config?.participants ?? [],
@@ -166,62 +176,69 @@ export class NylasEditorTabs {
             hideReschedulingOptions: config?.scheduler?.hide_rescheduling_options ?? false,
         };
     }
+    setFormState(value, key) {
+        switch (key) {
+            case 'title':
+                this.formState.title = value.toString();
+                break;
+            case 'description':
+                this.formState.description = value.toString();
+                break;
+            case 'duration':
+                this.formState.duration = value.toString();
+                break;
+            case 'availability':
+                this.formState.availability = JSON.parse(value.toString());
+                break;
+            case 'participants':
+                this.formState.participants = JSON.parse(value.toString());
+                break;
+            case 'calendars':
+                this.formState.calendarIds = value.toString().split(',');
+                break;
+            case 'booking-calendar':
+                this.formState.bookingCalendar = value.toString();
+                break;
+            case 'location':
+                this.formState.location = value.toString();
+                break;
+            case 'booking-type':
+                this.formState.bookingType = value.toString();
+                break;
+            case 'buffer-time':
+                this.formState.buffer = JSON.parse(value.toString());
+                break;
+            case 'limit-future-bookings':
+                this.formState.availableDaysInFuture = parseInt(value.toString());
+                break;
+            case 'min-cancellation-notice':
+                this.formState.minCancellationNotice = parseInt(value.toString());
+                break;
+            case 'min-booking-notice':
+                this.formState.minBookingNotice = parseInt(value.toString());
+                break;
+            case 'cancellation-policy':
+                this.formState.cancellationPolicy = value.toString();
+                break;
+            case 'timeslot-interval':
+                this.formState.timeslotInterval = JSON.parse(value.toString());
+                break;
+            case 'customize-booking-settings':
+                const settings = JSON.parse(value.toString());
+                this.formState.additionalGuestsHidden = settings.additionalGuestsHidden;
+                this.formState.hideCancellationOptions = settings.hideCancellationOptions;
+                this.formState.hideReschedulingOptions = settings.hideReschedulingOptions;
+                break;
+            case 'participant-custom-availability':
+                const participantOpenHours = JSON.parse(value.toString());
+                this.formState.participantOpenHours = participantOpenHours;
+                break;
+        }
+    }
     updateFormState() {
         const formData = new FormData(this.formRef);
         formData.forEach((value, key) => {
-            switch (key) {
-                case 'title':
-                    this.formState.title = value.toString();
-                    break;
-                case 'description':
-                    this.formState.description = value.toString();
-                    break;
-                case 'duration':
-                    this.formState.duration = value.toString();
-                    break;
-                case 'availability':
-                    this.formState.availability = JSON.parse(value.toString());
-                    break;
-                case 'participants':
-                    this.formState.participants = JSON.parse(value.toString());
-                    break;
-                case 'calendars':
-                    this.formState.calendarIds = value.toString().split(',');
-                    break;
-                case 'booking-calendar':
-                    this.formState.bookingCalendar = value.toString();
-                    break;
-                case 'location':
-                    this.formState.location = value.toString();
-                    break;
-                case 'booking-type':
-                    this.formState.bookingType = value.toString();
-                    break;
-                case 'buffer-time':
-                    this.formState.buffer = JSON.parse(value.toString());
-                    break;
-                case 'limit-future-bookings':
-                    this.formState.availableDaysInFuture = parseInt(value.toString());
-                    break;
-                case 'min-cancellation-notice':
-                    this.formState.minCancellationNotice = parseInt(value.toString());
-                    break;
-                case 'min-booking-notice':
-                    this.formState.minBookingNotice = parseInt(value.toString());
-                    break;
-                case 'cancellation-policy':
-                    this.formState.cancellationPolicy = value.toString();
-                    break;
-                case 'timeslot-interval':
-                    this.formState.timeslotInterval = JSON.parse(value.toString());
-                    break;
-                case 'customize-booking-settings':
-                    const settings = JSON.parse(value.toString());
-                    this.formState.additionalGuestsHidden = settings.additionalGuestsHidden;
-                    this.formState.hideCancellationOptions = settings.hideCancellationOptions;
-                    this.formState.hideReschedulingOptions = settings.hideReschedulingOptions;
-                    break;
-            }
+            this.setFormState(value, key);
         });
         this.formState = { ...this.formState };
         return this.formState;
@@ -234,22 +251,22 @@ export class NylasEditorTabs {
     render() {
         debug('[nylas-editor-tabs]', 'render', this.formState);
         const showParticipantsTab = localStorage.getItem('nylas') === 'Nylas Developer';
-        return (h(Host, { key: 'ed57de888af9f29e6be4562b8d65c9800a6b4ad9' }, h("form", { key: '5f3d154f95b47b78fe3cc83a76df4d7e39330f80', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, h("people-icon", { width: "16", height: "16" }), "Participants"))), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: 'c2a419fa59d6622e32627e476853ece732ff517c', class: "footer" }, h("div", { key: 'b4eab68c7ee5d35aa1f9a77e0ef1c47d5080252a', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
+        return (h(Host, { key: 'ccfd780da5c6ce1688f60384796bbaa98fe6094d' }, h("form", { key: '2e5d1c16a5373a5b623869925a7cab71f52f98ce', onSubmit: this.formSubmissionHandler, class: "scheduler-editor", ref: el => (this.formRef = el), noValidate: true }, this.mode === 'app' ? (h("div", { class: "form-contents" }, h("div", { class: "tabs" }, h("button", { class: { tab: true, active: this.activeTab == 'eventInfo' }, onClick: e => this.setActiveTab(e, 'eventInfo') }, h("calendar-info-icon", { width: "16", height: "16" }), "Event Info"), h("button", { class: { tab: true, active: this.activeTab == 'availability' }, onClick: e => this.setActiveTab(e, 'availability') }, h("calendar-patterns-icon", { width: "16", height: "16" }), "Availability"), h("button", { class: { tab: true, active: this.activeTab == 'bookingOptions' }, onClick: e => this.setActiveTab(e, 'bookingOptions') }, h("flow-icon", { width: "16", height: "16" }), "Booking Options"), showParticipantsTab && (h("button", { class: { tab: true, active: this.activeTab == 'participants' }, onClick: e => this.setActiveTab(e, 'participants') }, h("people-icon", { width: "16", height: "16" }), "Participants"))), h("div", { class: "tab-content" }, h(TabContents, { formState: this.formState, activeTab: this.activeTab, calendars: this.calendars, id: this.selectedConfiguration?.id ?? 'new' })))) : (h("slot", null)), h("div", { key: 'f11d2767c5fc65ad7a72f346e9b3940b8151d7a3', class: "footer" }, h("div", { key: '858c5dac4d006f28b05347be3feba2d6dd336b15', class: "preview" }, this.schedulerPreviewLink !== '' && this.action === 'edit' && (h("button-component", { type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 const previewEvent = this.previewButtonClicked.emit(this.host);
                 if (!previewEvent.defaultPrevented) {
                     window.open(parsePreviewLink(this.schedulerPreviewLink, this.selectedConfiguration), '_blank');
                 }
-            }, variant: 'basic' }, "Preview"))), h("div", { key: '0d1be883712a43e918d6a24415309e7fca51ac6b', class: "buttons" }, h("p", { key: 'e84e22ff1f71263e512ec95ee1513c53d4dadc10', class: {
+            }, variant: 'basic' }, "Preview"))), h("div", { key: 'c5225165887e64b467570a3f90222479fb259494', class: "buttons" }, h("p", { key: '50b2861f9c99e3dc91e58f77097fa753ba02cd1b', class: {
                 'unsaved-changes': this.hasUnsavedChanges && !this.changesSaved,
                 'saved-changes': this.changesSaved,
                 'error': this.error !== '',
                 'error-full-width': this.error !== '' && this.action === 'create',
-            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: 'dd4e56935a6b20576b5316acb76947375084dfce', type: "button", disabled: this.isLoading, clickHandler: event => {
+            } }, this.error !== '' ? this.error : '', this.error == '' && this.hasUnsavedChanges && !this.changesSaved ? 'Unsaved changes' : this.error == '' && this.changesSaved ? 'Changes saved!' : ''), h("button-component", { key: '9934c2cf6faf7e74b135add1728e3524bc29e13f', type: "button", disabled: this.isLoading, clickHandler: event => {
                 event.preventDefault();
                 this.cancelButtonClick.emit();
                 this.error = '';
-            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '16324ef17540626894bde0f55c1198d45ef0d0ce', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
+            }, variant: 'basic' }, "Cancel"), h("button-component", { key: '872f1a24204c38948d484b2bf99aa72d78ba7a37', type: "submit", disabled: this.isLoading }, this.isLoading ? (h("span", null, "Saving", h("loading-icon", null), ' ')) : this.action == 'create' ? ('Create') : ('Save changes')))))));
     }
     static get is() { return "nylas-editor-tabs"; }
     static get encapsulation() { return "scoped"; }