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

package/dist/esm/nylas-booked-event-card.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, i as createEvent, h, a as Host } from './index-8362ce5c.js';
-import { R as RegisterComponent } from './register-component-ff6f5df4.js';
-import { a as debug } from './utils-3e18e0b2.js';
+import { R as RegisterComponent } from './register-component-0462b27d.js';
+import { k as addMinutesToCurrentTime, a as debug } from './utils-157014b4.js';
 import { T as TIMEZONE_MAP } from './constants-bf39e913.js';
 import './_commonjsHelpers-7c16df4a.js';
 
-const nylasBookedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:1rem;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;padding:8px;font-family:var(--nylas-font-family);font-weight:600;height:48px;line-height:24px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover,sp-button.cancel:focus{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover,sp-button.reschedule:focus{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
+const nylasBookedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 4rem;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:1rem;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;padding:8px;font-family:var(--nylas-font-family);font-weight:600;height:48px;line-height:24px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover,sp-button.cancel:focus{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover,sp-button.reschedule:focus{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -26,8 +26,22 @@ const NylasBookedEventCard = class {
         this.cancelBookingButtonClicked = createEvent(this, "cancelBookingButtonClicked", 7);
         this.rescheduleButtonClicked = createEvent(this, "rescheduleButtonClicked", 7);
         this.rescheduleBookedEventError = createEvent(this, "rescheduleBookedEventError", 7);
+        this.cancelBookedEventValidationError = createEvent(this, "cancelBookedEventValidationError", 7);
         this.handleCancelBookingButtonClicked = () => {
-            this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });
+            const today = new Date();
+            const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;
+            const dateTillCancellation = addMinutesToCurrentTime(today, minCancellationNotice);
+            if (today.getTime() < dateTillCancellation.getTime()) {
+                this.cancelBookedEventValidationError.emit({
+                    error: {
+                        title: 'Cancellation Error',
+                        message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,
+                    },
+                });
+            }
+            else {
+                this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });
+            }
         };
         this.handleRescheduleButtonClicked = () => {
             const errorHandler = (error) => {
@@ -54,6 +68,7 @@ const NylasBookedEventCard = class {
         this.bookingInfo = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         this.selectedTimeslot = undefined;
+        this.configSettings = undefined;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -64,7 +79,7 @@ const NylasBookedEventCard = class {
         debug(`[nylas-booked-event-card] Component did load`);
     }
     render() {
-        return (h(Host, { key: '1585329ee957e66c757861d989d29a9c1bb1451f', part: "nbec" }, h("sp-theme", { key: '113da8c82dd485188d40f1dea9f814be0c408ca2', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'af6b0a085e582f2d7bdb5503b9d5b6d3c7042fd3', class: "booked-event-timezone" }, h("globe-icon", { key: '0c3fbff398a24c97d82bb74434d9da574349919f' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '136d5341ef1d252b525359418e8df0a43f4160a0', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '767bcbb50f4ae8c294f3ab3733fe99cd7c4c78e1', class: "calendar-icon" }, h("calendar-check-icon", { key: 'e6fd3ec502795fbcaaf9d34b5b5c4cee2d732d4f' })), h("div", { key: '7dfa8cc7719760d396716ec81ab0022c01bbe22f', class: "booked-event-header" }, h("h2", { key: '34a452c275a3880f64575735a9e67db5a8cdea45', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: 'a081b1a3791e2e80dd651d1f9dbf5de2f2057f9a', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '0744f0fa4f3fff8f2dc0dec978632496d26bfae6' }), h("div", { key: '38460fbfbe5d19b4f0d48cb0df02e6d12c2f2740', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '1e282c329489e4def089d8fca1bd532557f91b92' }), h("h3", { key: '34bebd074562352d54628f763c339ccd4c44918a' }, "Booking date and time"), h("p", { key: 'd897859d30e6dd6651c0d4b0079bf0eab1df0356' }, new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '2aa56898e654721616459102329cbe498232d3e8' }), new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '5009ca55f795c2fd1240ed8bbc50216c4e66be87', class: "booking-participants" }), h("sp-divider", { key: '4b5b4325dda3f935387218429823b850d2a12f0e' }), h("div", { key: 'd25cc602a134085c19f0acea006db0707ceae7e5', class: "footer" }, h("sp-button", { key: '4625e515f2f79d6ecb0bb37813efe100c03cdaf2', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '9cbdc95cd53aa2d536751984b91ef5974e71179d', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
+        return (h(Host, { key: 'fd31424392865287d5a696d2ea4a0840974324c1', part: "nbec" }, h("sp-theme", { key: '5e4fab19061fd773200fc8856355d2efc6c7f767', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '5effb33fcc0492a2f968e5b29229a974fb1bf2a3', class: "booked-event-timezone" }, h("globe-icon", { key: '7be37ec8323f0c36112e4a8c5903c2078fe0ae0e' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '594e1cffea71361c2a52f5ed3f480b7fc7a6c0f4', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'e2bcea8c2cd100f6291846d29524ee08a2c6d6ad', class: "calendar-icon" }, h("calendar-check-icon", { key: '412d634ebd082474581d8ceba417bcefb45d10eb' })), h("div", { key: '97f9f06776a64a9ceed5f8b7c84ed9d03983e083', class: "booked-event-header" }, h("h2", { key: '7453ad8f16ca9e477a5c6f7791dbf2aa89514394', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '5877c31296ad8821c822b8447a9adb495eea9756', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '3845e25500160ac43e0c19af3c3c3c446caca39e' }), h("div", { key: '349d849d49be4e71264436c6add7039b889f8933', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'bccea293108ed90eece51494c79c8e5ae2db1411' }), h("h3", { key: 'ee98cd2b9c877a7e8342940892ff08be4ee647e0' }, "Booking date and time"), h("p", { key: '1efd072abb08a6606299911e594a07b2de396113' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: 'e014d22678d84c7541854985d945672efde047e9' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '0870d9969b572bf688c4c12de934066ed36f421a', class: "booking-participants" }), h("sp-divider", { key: '85674fadb92fc69826e738545a9f9bd1c478d522' }), h("div", { key: 'c60007a3d63af3cca707736386f7cbc1d2963626', class: "footer" }, h("sp-button", { key: 'f1295268e7f3341e37e7d66d460eabc28ad56482', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '276674ce1eb225cfb7ea95936e1cb05056b921cc', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
     }
 };
 __decorate([
@@ -75,6 +90,7 @@ __decorate([
             ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],
             ['scheduler.selectedTimezone', 'selectedTimezone'],
             ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {
             cancelBookingButtonClicked: async (event, nylasSchedulerConnector) => {

package/dist/esm/nylas-booked-event-card.entry.js.map

@@ -1 +1 @@
-{"file":"nylas-booked-event-card.entry.js","mappings":";;;;;;AAAA,MAAM,uBAAuB,GAAG,8/GAA8/G;;;;;;;;;;;;;;;;MC0BjhH,oBAAoB;;;;;;QAqDvB,qCAAgC,GAAG;YACzC,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC;SAChF,CAAC;QAEM,kCAA6B,GAAG;YACtC,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC7C,CAAC;YACF,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,YAAY,EAAE,CAAC,CAAC;SAC3F,CAAC;QAEM,iBAAY,GAAG,CAAC,SAAqB;YAC3C,MAAM,SAAS,GAAG,SAAS,EAAE,SAAS,CAAC;YACvC,OAAO,SAAS,CAAC;SAClB,CAAC;QAEF,sBAAiB,GAAG,CAAC,IAAY;YAC/B,QAAQ,IAAI;gBACV,KAAK,MAAM;oBACT,OAAO,MAAM,CAAC;gBAChB,KAAK,KAAK;oBACR,OAAO,KAAK,CAAC;gBACf;oBACE,OAAO,EAAE,CAAC;aACb;SACF,CAAC;;;;gCA3D0C,IAAI,CAAC,cAAc,EAAE,CAAC,eAAe,EAAE,CAAC,QAAQ;;;IAsB5F,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,MAAM,iBAAiB;QACrB,KAAK,CAAC,+CAA+C,CAAC,CAAC;KACxD;IAED,MAAM,gBAAgB;QACpB,KAAK,CAAC,8CAA8C,CAAC,CAAC;KACvD;IAsDD,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM,IACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,IACpD,4DAAK,KAAK,EAAC,uBAAuB,IAChC,oEAAyB,EACxB,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAChC,EACN,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,YAAY,IAC/C,4DAAK,KAAK,EAAC,eAAe,IACxB,6EAAuB,CACnB,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,2DAAI,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa,gBAC7B,CAAC,CAAC,IAAI,CAAC,mBAAmB,GAAG,aAAa,GAAG,WAAW,MAC9D,EACL,4DAAK,IAAI,EAAC,mBAAmB,IAC1B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,KAAK,mBACnF,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,CACtF,CACF,EACN,oEAAyB,EACzB,4DAAK,KAAK,EAAC,mBAAmB,IAC5B,+EAA+C,EAC/C,qFAA8B,EAC9B,4DACG,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,OAAE,4DAAM,EACvG,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,QAAI,GAAG,EACvG,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAC7F,CACA,EACN,4DAAK,KAAK,EAAC,sBAAsB,GAc3B,EACN,oEAAyB,EACzB,4DAAK,KAAK,EAAC,QAAQ,IACjB,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAAE,IAAI,EAAC,uCAAuC,qBAElJ,EACZ,kEAAW,OAAO,EAAC,WAAW,EAAC,SAAS,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,6BAA6B,EAAE,IAAI,EAAC,2CAA2C,iBAEvJ,CACR,CACF,CACG,CACN,EACP;KACH;;AA3DD;IAzBC,iBAAiB,CAA+F;QAC/G,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,+BAA+B,EAAE,qBAAqB,CAAC;YACxD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;SACnD,CAAC;QACF,YAAY,EAAE;YACZ,0BAA0B,EAAE,OAAO,KAAyC,EAAE,uBAAgD;gBAC5H,uBAAuB,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;aACrE;YACD,uBAAuB,EAAE,OACvB,KAAsG,EACtG,uBAAgD;gBAEhD,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;gBAC7F,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBACtC,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;oBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;iBACtB;aACF;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;kDA4DD;;;;;","names":[],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\nsp-theme {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 0;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 4px;\n  }\n  p {\n    font-size: 16px;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 16px;\n  padding: 8px;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n  height: 48px;\n  line-height: 24px;\n  &.cancel {\n    color: var(--nylas-error);\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-error);\n    }\n    &:active {\n      color: var(--nylas-error-pressed);\n      border-color: var(--nylas-error-pressed);\n    }\n  }\n  &.reschedule {\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-primary);\n    }\n    &:active {\n      border-color: var(--nylas-base-600);\n    }\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-booked-event-card.entry.js","mappings":"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","names":[],"sources":["src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.scss?tag=nylas-booked-event-card&encapsulation=shadow","src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n}\n\nsp-theme {\n  height: inherit;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  font-family: var(--nylas-font-family);\n}\n\n.event-card-wrapper {\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-900);\n  border-radius: var(--nylas-border-radius-3x);\n  position: relative;\n  margin-top: 1rem;\n  margin-bottom: 2rem;\n  width: 424px;\n  @media #{$mobile} {\n    width: 100%;\n    border-radius: 0px;\n  }\n  box-shadow:\n    0px 1px 4px rgba(0, 0, 0, 0.1),\n    0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.calendar-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 3rem;\n  height: 3rem;\n  border-radius: 50%;\n  position: absolute;\n  top: -1.25rem;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--nylas-base-0);\n  border: 1px solid var(--nylas-base-200);\n  color: var(--nylas-base-700);\n}\n\n.booked-event-header {\n  margin: 1.5rem 4rem;\n  overflow-wrap: anywhere;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  font-size: 1rem;\n  font-weight: 400;\n\n  h2 {\n    color: var(--nylas-base-600);\n    margin-top: 1.5rem;\n    margin-bottom: 0.25rem;\n    font-size: 1.125rem;\n    font-weight: 600;\n  }\n}\n\n.booking-date-time,\n.booking-participants {\n  padding: 0 1rem;\n  margin-top: 1.5rem;\n  margin-left: 3rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-self: flex-start;\n  position: relative;\n\n  svg {\n    color: var(--nylas-base-700);\n    position: absolute;\n    left: -10px;\n  }\n\n  .block {\n    display: block;\n  }\n\n  h3 {\n    color: var(--nylas-base-600);\n    margin: 0;\n    font-size: 1rem;\n    font-weight: 600;\n    line-height: 1.25rem;\n    text-align: justify;\n    margin-bottom: 4px;\n  }\n  p {\n    font-size: 16px;\n    margin: 0;\n    font-weight: 400;\n    text-align: justify;\n    color: var(--nylas-base-800);\n  }\n}\n\n.booking-participants {\n  margin-bottom: 1.5rem;\n}\n\n.booked-event-timezone {\n  display: flex;\n  color: var(--nylas-base-600);\n  margin-bottom: 1.5rem;\n  gap: 4px;\n  margin: 2rem;\n  align-items: center;\n  align-self: flex-end;\n}\n\n.footer {\n  padding: 0.5rem;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.5rem;\n  box-sizing: border-box;\n  background-color: var(--nylas-base-25);\n  width: 100%;\n  border-radius: 0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x);\n}\n\nsp-button {\n  background-color: var(--nylas-base-0);\n  color: var(--nylas-base-700);\n  border: 1px solid var(--nylas-base-200);\n  border-radius: var(--nylas-border-radius-2x);\n  font-size: 16px;\n  padding: 8px;\n  font-family: var(--nylas-font-family);\n  font-weight: 600;\n  height: 48px;\n  line-height: 24px;\n  &.cancel {\n    color: var(--nylas-error);\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-error);\n    }\n    &:active {\n      color: var(--nylas-error-pressed);\n      border-color: var(--nylas-error-pressed);\n    }\n  }\n  &.reschedule {\n    &:hover,\n    &:focus {\n      border-color: var(--nylas-primary);\n    }\n    &:active {\n      border-color: var(--nylas-base-600);\n    }\n  }\n}\n\nsp-divider {\n  background-color: var(--nylas-base-200);\n  height: 1px;\n}\n\ncalendar-check-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { ConfigSettings, NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduler/nylas-scheduling';\nimport { addMinutesToCurrentTime, debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\nimport { NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\n\n/**\n * The `nylas-booked-event-card` component is a UI component that displays the booked event card.\n *\n * @part nbec - The booked event card host.\n * @part nbec__card - The booked event card.\n * @part nbec__title - The title of the booked event card.\n * @part nbec__description - The description of the booked event card.\n * @part nbec__button-outline - The cancel & reschedule button CTA.\n * @part nbec__cancel-cta - The cancel button CTA.\n * @part nbec__reschedule-cta - The reschedule button CTA.\n */\n@Component({\n  tag: 'nylas-booked-event-card',\n  styleUrl: 'nylas-booked-event-card.scss',\n  shadow: true,\n})\nexport class NylasBookedEventCard {\n  /**\n   * The booked event.\n   */\n  @Prop() readonly eventInfo!: NylasEvent;\n\n  /**\n   * Booking flow type.\n   */\n  @Prop() readonly rescheduleBookingId?: string;\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n  /**\n   * The selected timezone.\n   */\n  @Prop() readonly selectedTimezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;\n\n  /**\n   * The selected timeslot.\n   */\n  @Prop() readonly selectedTimeslot!: Timeslot;\n\n  /**\n   * The config settings for the scheduler.\n   */\n  @Prop() readonly configSettings?: ConfigSettings;\n\n  /**\n   * Cancel booking button clicked event.\n   */\n  @Event() readonly cancelBookingButtonClicked!: EventEmitter<{ bookingId: string }>;\n\n  /**\n   * Reschedule button clicked event.\n   * */\n  @Event() readonly rescheduleButtonClicked!: EventEmitter<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n  /**\n   * This event is fired when an error occurs while rescheduling the booking.\n   */\n  @Event() readonly rescheduleBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n  /**\n   * This event is fired when an error occurs while cancelling the booking.\n   */\n  @Event() readonly cancelBookedEventValidationError!: EventEmitter<{\n    error: {\n      title: string;\n      message: string;\n    };\n  }>;\n\n  connectedCallback() {}\n\n  disconnectedCallback() {}\n\n  async componentWillLoad() {\n    debug(`[nylas-booked-event-card] Component will load`);\n  }\n\n  async componentDidLoad() {\n    debug(`[nylas-booked-event-card] Component did load`);\n  }\n\n  private handleCancelBookingButtonClicked = () => {\n    const today = new Date();\n    const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;\n    const dateTillCancellation = addMinutesToCurrentTime(today, minCancellationNotice);\n    if (today.getTime() < dateTillCancellation.getTime()) {\n      this.cancelBookedEventValidationError.emit({\n        error: {\n          title: 'Cancellation Error',\n          message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,\n        },\n      });\n    } else {\n      this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });\n    }\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    const errorHandler = (error: NylasSchedulerErrorResponse) => {\n      this.rescheduleBookedEventError.emit(error);\n    };\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.booking_id, errorHandler });\n  };\n\n  private getOrganizer = (eventInfo: NylasEvent) => {\n    const organizer = eventInfo?.organizer;\n    return organizer;\n  };\n\n  getPaticipantType = (type: string) => {\n    switch (type) {\n      case 'host':\n        return 'Host';\n      case 'you':\n        return 'You';\n      default:\n        return '';\n    }\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingInfo', 'bookingInfo'],\n      ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],\n      ['scheduler.selectedTimezone', 'selectedTimezone'],\n      ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n      ['scheduler.configSettings', 'configSettings'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.setCancel(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (\n        event: CustomEvent<{ bookingId: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n        nylasSchedulerConnector: NylasSchedulerConnector,\n      ) => {\n        const result = await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\n        const { errorHandler } = event.detail;\n        if (errorHandler && (!result || 'error' in result)) {\n          errorHandler(result);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    return (\n      <Host part=\"nbec\">\n        <sp-theme theme=\"spectrum\" color=\"dark\" scale=\"medium\">\n          <div class=\"booked-event-timezone\">\n            <globe-icon></globe-icon>\n            {TIMEZONE_MAP[this.selectedTimezone]}\n          </div>\n          <div class=\"event-card-wrapper\" part=\"nbec__card\">\n            <div class=\"calendar-icon\">\n              <calendar-check-icon />\n            </div>\n            <div class=\"booked-event-header\">\n              <h2 slot=\"card-title\" part=\"nbec__title\">\n                Booking {!!this.rescheduleBookingId ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email}&nbsp;&amp;&nbsp;\n                {this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email}\n              </div>\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"booking-date-time\">\n              <checkmark-circle-icon></checkmark-circle-icon>\n              <h3>Booking date and time</h3>\n              <p>\n                {new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' })}\n              </p>\n            </div>\n            <div class=\"booking-participants\">\n              {/* <people-icon></people-icon>\n              <h3>All participants</h3>\n              {this.eventInfo?.participants && (\n                <p>\n                  {this.eventInfo?.participants?.map((participant: NylasEvent['participants'][0]) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email} {this.getPaticipantType(participant.type) && `(${this.getPaticipantType(participant.type)})`}\n                      </span>\n                    );\n                  })}\n                </p>\n              )} */}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"cancel\" onClick={this.handleCancelBookingButtonClicked} part=\"nbec__button-outline nbec__cancel-cta\">\n                Cancel booking\n              </sp-button>\n              <sp-button variant=\"secondary\" treatment=\"outline\" class=\"reschedule\" onClick={this.handleRescheduleButtonClicked} part=\"nbec__button-outline nbec__reschedule-cta\">\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/nylas-booked-event-card_10.entry.js

@@ -1,10 +1,10 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement, F as Fragment } from './index-7cb0dd3d.js';
-import { R as RegisterComponent } from './register-component-b9cfcbaf.js';
-import { a as debug, n as getLastDayOfMonth, o as getFirstDayOfMonth, q as isSameDay, r as isSameMonth } from './utils-db11d29c.js';
+import { R as RegisterComponent } from './register-component-83e24412.js';
+import { q as addMinutesToCurrentTime, a as debug, r as getLastDayOfMonth, s as getFirstDayOfMonth, h as addDaysToCurrentDate, v as isSameDay, w as isSameMonth } from './utils-e6b73120.js';
 import { T as TIMEZONE_MAP, g as getTimezoneOffset, L as LANGUAGE_MAP } from './constants-f34b9c6e.js';
 import './_commonjsHelpers-57e89916.js';
 
-const nylasBookedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 0;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:1rem;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;padding:8px;font-family:var(--nylas-font-family);font-weight:600;height:48px;line-height:24px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover,sp-button.cancel:focus{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover,sp-button.reschedule:focus{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
+const nylasBookedEventCardCss = ":host{display:block;--nylas-primary:#2563eb;--nylas-error:#cc4841;--nylas-error-pressed:#992222;--nylas-wraning:#f06c00;--nylas-success:#16a392;--nylas-info:#2b8fc2;--nylas-base-0:#ffffff;--nylas-base-25:#fcfcfd;--nylas-base-50:#f8f9fc;--nylas-base-100:#eaecf5;--nylas-base-200:#d5d9eb;--nylas-base-300:#b3b8d8;--nylas-base-400:#717bbc;--nylas-base-500:#4e5ba6;--nylas-base-600:#3e4784;--nylas-base-700:#263f72;--nylas-base-800:#293056;--nylas-base-900:#101323;--nylas-base-950:#0e101b;--nylas-border-radius:0.25rem;--nylas-border-radius-2x:0.5rem;--nylas-border-radius-3x:0.75rem;--nylas-font-family:\"Inter\", sans-serif}sp-theme{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family)}.event-card-wrapper{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-900);border-radius:var(--nylas-border-radius-3x);position:relative;margin-top:1rem;margin-bottom:2rem;width:424px;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}@media screen and (max-width: 768px){.event-card-wrapper{width:100%;border-radius:0px}}.calendar-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;position:absolute;top:-1.25rem;left:50%;transform:translateX(-50%);background-color:var(--nylas-base-0);border:1px solid var(--nylas-base-200);color:var(--nylas-base-700)}.booked-event-header{margin:1.5rem 4rem;overflow-wrap:anywhere;display:flex;align-items:center;flex-direction:column;font-size:1rem;font-weight:400}.booked-event-header h2{color:var(--nylas-base-600);margin-top:1.5rem;margin-bottom:0.25rem;font-size:1.125rem;font-weight:600}.booking-date-time,.booking-participants{padding:0 1rem;margin-top:1.5rem;margin-left:3rem;display:flex;flex-direction:column;justify-content:space-between;align-self:flex-start;position:relative}.booking-date-time svg,.booking-participants svg{color:var(--nylas-base-700);position:absolute;left:-10px}.booking-date-time .block,.booking-participants .block{display:block}.booking-date-time h3,.booking-participants h3{color:var(--nylas-base-600);margin:0;font-size:1rem;font-weight:600;line-height:1.25rem;text-align:justify;margin-bottom:4px}.booking-date-time p,.booking-participants p{font-size:16px;margin:0;font-weight:400;text-align:justify;color:var(--nylas-base-800)}.booking-participants{margin-bottom:1.5rem}.booked-event-timezone{display:flex;color:var(--nylas-base-600);margin-bottom:1.5rem;gap:4px;margin:2rem;align-items:center;align-self:flex-end}.footer{padding:0.5rem;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;box-sizing:border-box;background-color:var(--nylas-base-25);width:100%;border-radius:0 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x)}sp-button{background-color:var(--nylas-base-0);color:var(--nylas-base-700);border:1px solid var(--nylas-base-200);border-radius:var(--nylas-border-radius-2x);font-size:16px;padding:8px;font-family:var(--nylas-font-family);font-weight:600;height:48px;line-height:24px}sp-button.cancel{color:var(--nylas-error)}sp-button.cancel:hover,sp-button.cancel:focus{border-color:var(--nylas-error)}sp-button.cancel:active{color:var(--nylas-error-pressed);border-color:var(--nylas-error-pressed)}sp-button.reschedule:hover,sp-button.reschedule:focus{border-color:var(--nylas-primary)}sp-button.reschedule:active{border-color:var(--nylas-base-600)}sp-divider{background-color:var(--nylas-base-200);height:1px}calendar-check-icon{display:flex;align-items:center;justify-content:center;height:100%}";
 const NylasBookedEventCardStyle0 = nylasBookedEventCardCss;
 
 var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -27,8 +27,22 @@ const NylasBookedEventCard = class {
         this.cancelBookingButtonClicked = createEvent(this, "cancelBookingButtonClicked", 7);
         this.rescheduleButtonClicked = createEvent(this, "rescheduleButtonClicked", 7);
         this.rescheduleBookedEventError = createEvent(this, "rescheduleBookedEventError", 7);
+        this.cancelBookedEventValidationError = createEvent(this, "cancelBookedEventValidationError", 7);
         this.handleCancelBookingButtonClicked = () => {
-            this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });
+            const today = new Date();
+            const minCancellationNotice = this.configSettings?.scheduler.min_cancellation_notice;
+            const dateTillCancellation = addMinutesToCurrentTime(today, minCancellationNotice);
+            if (today.getTime() < dateTillCancellation.getTime()) {
+                this.cancelBookedEventValidationError.emit({
+                    error: {
+                        title: 'Cancellation Error',
+                        message: `You cannot cancel the booking within ${minCancellationNotice} minutes of the event.`,
+                    },
+                });
+            }
+            else {
+                this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.booking_id });
+            }
         };
         this.handleRescheduleButtonClicked = () => {
             const errorHandler = (error) => {
@@ -55,6 +69,7 @@ const NylasBookedEventCard = class {
         this.bookingInfo = undefined;
         this.selectedTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         this.selectedTimeslot = undefined;
+        this.configSettings = undefined;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -65,7 +80,7 @@ const NylasBookedEventCard = class {
         debug(`[nylas-booked-event-card] Component did load`);
     }
     render() {
-        return (h(Host, { key: '1585329ee957e66c757861d989d29a9c1bb1451f', part: "nbec" }, h("sp-theme", { key: '113da8c82dd485188d40f1dea9f814be0c408ca2', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: 'af6b0a085e582f2d7bdb5503b9d5b6d3c7042fd3', class: "booked-event-timezone" }, h("globe-icon", { key: '0c3fbff398a24c97d82bb74434d9da574349919f' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '136d5341ef1d252b525359418e8df0a43f4160a0', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '767bcbb50f4ae8c294f3ab3733fe99cd7c4c78e1', class: "calendar-icon" }, h("calendar-check-icon", { key: 'e6fd3ec502795fbcaaf9d34b5b5c4cee2d732d4f' })), h("div", { key: '7dfa8cc7719760d396716ec81ab0022c01bbe22f', class: "booked-event-header" }, h("h2", { key: '34a452c275a3880f64575735a9e67db5a8cdea45', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: 'a081b1a3791e2e80dd651d1f9dbf5de2f2057f9a', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '0744f0fa4f3fff8f2dc0dec978632496d26bfae6' }), h("div", { key: '38460fbfbe5d19b4f0d48cb0df02e6d12c2f2740', class: "booking-date-time" }, h("checkmark-circle-icon", { key: '1e282c329489e4def089d8fca1bd532557f91b92' }), h("h3", { key: '34bebd074562352d54628f763c339ccd4c44918a' }, "Booking date and time"), h("p", { key: 'd897859d30e6dd6651c0d4b0079bf0eab1df0356' }, new Date(this.selectedTimeslot.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '2aa56898e654721616459102329cbe498232d3e8' }), new Date(this.selectedTimeslot.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '5009ca55f795c2fd1240ed8bbc50216c4e66be87', class: "booking-participants" }), h("sp-divider", { key: '4b5b4325dda3f935387218429823b850d2a12f0e' }), h("div", { key: 'd25cc602a134085c19f0acea006db0707ceae7e5', class: "footer" }, h("sp-button", { key: '4625e515f2f79d6ecb0bb37813efe100c03cdaf2', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '9cbdc95cd53aa2d536751984b91ef5974e71179d', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
+        return (h(Host, { key: 'fd31424392865287d5a696d2ea4a0840974324c1', part: "nbec" }, h("sp-theme", { key: '5e4fab19061fd773200fc8856355d2efc6c7f767', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '5effb33fcc0492a2f968e5b29229a974fb1bf2a3', class: "booked-event-timezone" }, h("globe-icon", { key: '7be37ec8323f0c36112e4a8c5903c2078fe0ae0e' }), TIMEZONE_MAP[this.selectedTimezone]), h("div", { key: '594e1cffea71361c2a52f5ed3f480b7fc7a6c0f4', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: 'e2bcea8c2cd100f6291846d29524ee08a2c6d6ad', class: "calendar-icon" }, h("calendar-check-icon", { key: '412d634ebd082474581d8ceba417bcefb45d10eb' })), h("div", { key: '97f9f06776a64a9ceed5f8b7c84ed9d03983e083', class: "booked-event-header" }, h("h2", { key: '7453ad8f16ca9e477a5c6f7791dbf2aa89514394', slot: "card-title", part: "nbec__title" }, "Booking ", !!this.rescheduleBookingId ? 'rescheduled' : 'confirmed', "!"), h("div", { key: '5877c31296ad8821c822b8447a9adb495eea9756', part: "nbec__description" }, this.getOrganizer(this.eventInfo)?.name || this.getOrganizer(this.eventInfo)?.email, "\u00A0&\u00A0", this.bookingInfo?.primaryParticipant?.name || this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '3845e25500160ac43e0c19af3c3c3c446caca39e' }), h("div", { key: '349d849d49be4e71264436c6add7039b889f8933', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'bccea293108ed90eece51494c79c8e5ae2db1411' }), h("h3", { key: 'ee98cd2b9c877a7e8342940892ff08be4ee647e0' }, "Booking date and time"), h("p", { key: '1efd072abb08a6606299911e594a07b2de396113' }, new Date(this.selectedTimeslot?.start_time).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: 'e014d22678d84c7541854985d945672efde047e9' }), new Date(this.selectedTimeslot?.start_time).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.selectedTimeslot?.end_time).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '0870d9969b572bf688c4c12de934066ed36f421a', class: "booking-participants" }), h("sp-divider", { key: '85674fadb92fc69826e738545a9f9bd1c478d522' }), h("div", { key: 'c60007a3d63af3cca707736386f7cbc1d2963626', class: "footer" }, h("sp-button", { key: 'f1295268e7f3341e37e7d66d460eabc28ad56482', variant: "secondary", treatment: "outline", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: '276674ce1eb225cfb7ea95936e1cb05056b921cc', variant: "secondary", treatment: "outline", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
     }
 };
 __decorate$7([
@@ -76,6 +91,7 @@ __decorate$7([
             ['scheduler.rescheduleBookingId', 'rescheduleBookingId'],
             ['scheduler.selectedTimezone', 'selectedTimezone'],
             ['scheduler.selectedTimeslot', 'selectedTimeslot'],
+            ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {
             cancelBookingButtonClicked: async (event, nylasSchedulerConnector) => {
@@ -411,10 +427,18 @@ const NylasCancelledEventCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.closeCancelEventCardClicked = createEvent(this, "closeCancelEventCardClicked", 7);
+        this.cancelledEventCardError = createEvent(this, "cancelledEventCardError", 7);
         this.handleCloseClicked = () => {
-            this.closeCancelEventCardClicked.emit();
+            this.isClosing = true;
+            const errorHandler = (error) => {
+                this.cancelledEventCardError.emit(error);
+                this.isClosing = false;
+            };
+            this.closeCancelEventCardClicked.emit({ errorHandler });
         };
         this.cancelledEventInfo = undefined;
+        this.isClosing = false;
+        this.configSettings = undefined;
     }
     connectedCallback() {
         debug(`[nylas-cancelled-event-card] Component connected`);
@@ -429,13 +453,22 @@ const NylasCancelledEventCard = class {
         debug(`[nylas-cancelled-event-card] Component disconnected`);
     }
     render() {
-        return (h(Host, { key: '656dd5537bf436780d779e06362974295b6cf552', part: "ncec" }, h("sp-theme", { key: 'e6aa25eb233fd0bca7006fd9bf63c9fb54738a66', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '005da251e2cad861ca1cb2bc276b01990618995f', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'b30f8abc7dede57b909d69beb11a7da0015bf044', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '9cc6e10a041979ff5a2a76c9d3e04446fdbfa27f' })), h("h3", { key: '0419fbe2aad08be631618146b77869307832f752', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: 'c3fb84c05112e0a4055f6eaaf878ad7afda8726e', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to the participants."), h("div", { key: '0409b5465346ffea4c43789fa027f9b5a853d263', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: '1d2efade3b5cd5ff48f3924c6b1e8248d2e478a3', variant: "secondary", treatment: "outline", part: "ncec__button-outline", onClick: this.handleCloseClicked }, "Close"))))));
+        return (h(Host, { key: '105954b6497f7a8cf45faedb592896629e90c6d0', part: "ncec" }, h("sp-theme", { key: 'd248975c2139a611ab60c5c585d87e8701327a4b', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '090b767111679ca9968ac0b128c6685fed6e39db', class: "nylas-cancelled-event-card", part: "ncec__card" }, h("div", { key: 'ae1e57f0f2a39f5ad7f4b7b9ed493f3e93ccdeba', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, h("calendar-cancel-icon", { key: '06250b1c0f330957f0f691d0f7724c608dffa28b' })), h("h3", { key: '1826c12ca770476cfd206d9d1a3b80f0d890da56', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, "Your booking has been cancelled successfully!"), h("div", { key: '93c4c7e4ed245372e736c61c30b23e9be11453ec', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, "A cancellation email has been sent to ", this.configSettings?.organizer?.name || 'the participants', "."), h("div", { key: '21162d4c4e2ee6c2f95038b0e25e9ad0aed63742', class: "nylas-cancelled-event-card__cta" }, h("sp-button", { key: 'ab6cb1da324717c3b375c9280f307a2590224f27', variant: "secondary", treatment: "outline", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? 'Closing...' : 'Close'))))));
     }
 };
 __decorate$4([
     RegisterComponent({
         name: 'nylas-cancelled-event-card',
-        eventToProps: {},
+        stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),
+        eventToProps: {
+            closeCancelEventCardClicked: async (_, nylasschedulerconnector) => {
+                const result = await nylasschedulerconnector.scheduler.resetCancel();
+                const { errorHandler } = _.detail;
+                if (errorHandler && (!result || 'error' in result)) {
+                    errorHandler(result);
+                }
+            },
+        },
         fireRegisterEvent: true,
     }),
     __metadata$4("design:type", Function),
@@ -570,9 +603,11 @@ const NylasDatePicker = class {
         this.monthChanged = createEvent(this, "monthChanged", 7);
         this.selectableDates = undefined;
         this.selectedDate = undefined;
+        this.configSettings = undefined;
         this.isLoading = undefined;
         this.month = this.selectedDate || new Date();
         this.dates = this.getDates();
+        this.disableNextMonthButton = false;
     }
     connectedCallback() { }
     disconnectedCallback() { }
@@ -587,6 +622,15 @@ const NylasDatePicker = class {
     }
     changeMonth(change) {
         this.month = new Date(this.month.getFullYear(), this.month.getMonth() + change, 1);
+        const nextMonth = new Date(this.month.getFullYear(), this.month.getMonth() + 1, 1);
+        const availableDaysInFuture = this.configSettings?.scheduler?.available_days_in_future;
+        const endDate = addDaysToCurrentDate(new Date(), availableDaysInFuture);
+        if (endDate.getTime() < nextMonth.getTime()) {
+            this.disableNextMonthButton = true;
+        }
+        else {
+            this.disableNextMonthButton = false;
+        }
         this.dates = this.getDates();
         this.monthChanged.emit(this.month);
         this.selectDate();
@@ -598,7 +642,7 @@ const NylasDatePicker = class {
         return date && selectableDates?.find(d => isSameDay(d, date)) === undefined;
     }
     render() {
-        return (h(Host, { key: 'da3c7e290b60613575379d559e03d5e1dca04535', part: "ndp" }, h("div", { key: '4bb1b14f4f609f601b27f7ad2eb4baeed6cc4d55', class: "nylas-date-picker" }, h("div", { key: '5d6c68298c5e9606bae9e45a99f0c59da3d36854', class: 'header flex-row' }, h("h2", { key: '2504a779961e1e07a881f2eb2f5ffa5d8329e627', part: 'ndp__month-header' }, h("strong", { key: '433fdd38ccf5b49144bafd3b284acd26b94d19c4' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ffaa3276b249a85dc197828625835ad1f2278179', class: 'pagination' }, h("button", { key: '451c9d09fc01e4c7ae35742d7c6b4b2f3da4d3ee', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '3a23fa0fb325feab4b56477602f122b800dce5ce' })), h("button", { key: '56b81156d02525a70c6c567e5facb1d9995ea2de', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length, part: "ndp__month-button" }, h("chevron-icon", { key: '1329d513678bffec6bc21d579b240e7af29ec530' })))), h("div", { key: '14eb94fe04ca2797f3377057a87825689b818719', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
+        return (h(Host, { key: 'fd7de67053417b11844a66e5b978f7feb80efe18', part: "ndp" }, h("div", { key: 'a08943851e2239ad12121b90f35760d73a085441', class: "nylas-date-picker" }, h("div", { key: '832ad38012c55eb04ab2c5b0ceb50052ab3edd42', class: 'header flex-row' }, h("h2", { key: '2df451227e57dfee081c1d4435443e479cf8871c', part: 'ndp__month-header' }, h("strong", { key: '63421dca4b9bf36207ba05e9eff795c7c198287c' }, this.month.toLocaleDateString(undefined, { month: 'long' })), "\u00A0", this.month.toLocaleDateString(undefined, { year: 'numeric' })), h("div", { key: 'ca982a82d87baf5658674624c1153f14e77470aa', class: 'pagination' }, h("button", { key: 'd2a41582014f92c23784c71fe1df9834d77fd355', onClick: () => this.changeMonth(-1), class: { 'chevron-left': true, 'button': true }, disabled: !this.selectableDates?.length || this.month <= new Date(), part: "ndp__month-button" }, h("chevron-icon", { key: '4f319da7e440236edb9bfa711fb0b05cd046dc8e' })), h("button", { key: 'ff00426293e1857592ebae58557ea46e5db9858d', onClick: () => this.changeMonth(1), class: { 'chevron-right': true, 'button': true }, disabled: !this.selectableDates?.length || this.disableNextMonthButton, part: "ndp__month-button" }, h("chevron-icon", { key: '7075f5e8da61c9d91fb612771a3d7672f1521b6f' })))), h("div", { key: '3ad884077d163de5182731c03bf856c9e204f411', class: 'dates' }, ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map(day => {
             return (h("div", { class: 'day', part: "ndp__day" }, day));
         }), this.dates.map((date, i) => {
             const isDisabled = this.isDisabled(date, this.selectableDates);
@@ -624,6 +668,7 @@ __decorate$3([
             ['scheduler.selectableDates', 'selectableDates'],
             ['scheduler.selectedDate', 'selectedDate'],
             ['scheduler.isLoading', 'isLoading'],
+            ['scheduler.configSettings', 'configSettings'],
         ]),
         eventToProps: {
             dateSelected: async (event, nylasSchedulerConnector) => {