@nylas/web-elements 1.0.0-prealpha1

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js

@@ -0,0 +1,178 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { RegisterComponent } from "../../../common/register-component";
+import { h, Host } from "@stencil/core";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left";
+import { debug } from "../../../utils/utils";
+import { TIMEZONE_MAP } from "../../../common/constants";
+export class NylasBookedEventCard {
+    constructor() {
+        this.handleCancelBookingButtonClicked = () => {
+            this.cancelBookingButtonClicked.emit({ bookingId: this.eventInfo.id });
+        };
+        this.handleRescheduleButtonClicked = () => {
+            this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.id });
+        };
+        this.eventInfo = undefined;
+        this.bookingFlow = 'booking';
+        this.bookingInfo = undefined;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    async componentWillLoad() {
+        debug(`[nylas-booked-event-card] Component will load`);
+    }
+    async componentDidLoad() {
+        debug(`[nylas-booked-event-card] Component did load`);
+    }
+    render() {
+        return (h(Host, { key: '4fe778a5b04ec6d1af49faf276ea343c35579e2b', part: "nbec" }, h("sp-theme", { key: '6db0e4e75b5cfa02ce671a55d1585dc9f6715beb', theme: "spectrum", color: "dark", scale: "medium" }, h("div", { key: '0af608a68c96252a9a1260a6bab7b220e444d521', class: "booked-event-timezone" }, h("globe-icon", { key: '85f9f0afbc385a41f42f5cb36946737e3cf36dc4' }), TIMEZONE_MAP[this.eventInfo?.booking_data?.timezone]), h("div", { key: 'c0cd863f8415a51dd194b5c32528a474e08e7973', class: "event-card-wrapper", part: "nbec__card" }, h("div", { key: '87e61df0cc32e4c97328fb49c08e6a684f9dd880', class: "calendar-icon" }, h("calendar-check-icon", { key: '61d625ea649af4dfa2a636b5e4ac6ded80d8a0ee' })), h("div", { key: 'c498c4ae048f6bd551df5a60035afc0a28645f45', class: "booked-event-header" }, h("h2", { key: '13f7942a7088b8e3b1479ae5c9541ee88feecb31', slot: "card-title", part: "nbec__title" }, "Booking ", this.bookingFlow === 'rescheduling' ? 'rescheduled' : 'confirmed', "!"), h("div", { key: 'e3529efda5ff6915f2a9935a8b35d17d17a142a8', part: "nbec__description" }, this.eventInfo?.config?.data?.event_booking?.organizer.email, " \u00A0&\u00A0 ", this.bookingInfo?.primaryParticipant?.email)), h("sp-divider", { key: '0a22beaf559877d046b760f1d60b57cff82e1210' }), h("div", { key: '8a03a51879a43e7e3799c35fb1f40ac60d9af2ce', class: "booking-date-time" }, h("checkmark-circle-icon", { key: 'c1d1d829247d1f5234d9448961ae30febfac45bc' }), h("h3", { key: '1632748199bba9118beea332ebb7b7da51facac6' }, "Booking date and time"), h("p", { key: '6b65ae60b424a2129d0d57a8e7615c144c8763a3' }, new Date(this.eventInfo?.booking_data?.start_time * 1000).toLocaleDateString(undefined, { dateStyle: 'full' }), " ", h("br", { key: '8b6961d12d8181afbe42ded8cd0aadd059318933' }), new Date(this.eventInfo?.booking_data?.start_time * 1000).toLocaleTimeString(undefined, { timeStyle: 'short' }), " -", ' ', new Date(this.eventInfo?.booking_data?.end_time * 1000).toLocaleTimeString(undefined, { timeStyle: 'short' }))), h("div", { key: '072c94034fdfb53e136fc70a4d245ddf24233be7', class: "booking-participants" }, h("people-icon", { key: '2342e4e9b33f3846acefb704cdbe6f8fe9095df5' }), h("h3", { key: '4594855262abf5223cc0154db85f3fd6abce5af8' }, "All participants"), this.eventInfo?.config?.data?.event_booking?.organizer && (h("p", null, `${this.eventInfo?.config?.data?.event_booking?.organizer.email} (organizer)`, h("br", null), this.eventInfo?.booking_data?.participants.map((participant) => {
+            return (h("span", { class: "block" }, participant.email, ' ', participant.name == this.bookingInfo?.primaryParticipant?.name || participant.email == this.bookingInfo?.primaryParticipant?.email ? '(You)' : ''));
+        })))), h("sp-divider", { key: 'e6110f8def748ee67351d524946c74143bc1b303' }), h("div", { key: 'a5016e1b9fa8e2800bf3cc2478c272145251cb71', class: "footer" }, h("sp-button", { key: '4cdc8f83d90c1f5b5512844aa664692320b7c9eb', variant: "secondary", treatment: "outline", size: "xl", class: "cancel", onClick: this.handleCancelBookingButtonClicked, part: "nbec__button-outline nbec__cancel-cta" }, "Cancel booking"), h("sp-button", { key: 'e14e0f48e8c28c12b254a20dfc52863addbe192c', variant: "secondary", treatment: "outline", size: "xl", class: "reschedule", onClick: this.handleRescheduleButtonClicked, part: "nbec__button-outline nbec__reschedule-cta" }, "Reschedule"))))));
+    }
+    static get is() { return "nylas-booked-event-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-booked-event-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-booked-event-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "eventInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasEvent",
+                    "resolved": "{ id: string; event_id: string; owner_email: string; status: string; booking_data: { participants: { email: string; name: string; }[]; duration: number; event_type: number; start_time: number; end_time: number; title: string; description: string; timezone: string; }; created_at: string; updated_at: string; config: { id: number; data: { version: string; availability: { duration_minutes: number; interval_minutes: number; round_to_30_minutes: boolean; participants: { email: string; name: string; calendar_ids: string[]; open_hours: { days: number[]; timezone: string; start: string; end: string; }[]; }[]; }; event_booking: { title: string; description: string; type: number; organizer: { email: string; calendar_id: string; }; }; }; created_at: string; updated_at: string; is_session_defined: boolean; }; }",
+                    "references": {
+                        "NylasEvent": {
+                            "location": "import",
+                            "path": "@/common/types",
+                            "id": "src/common/types.ts::NylasEvent"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The booked event."
+                }
+            },
+            "bookingFlow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'booking' | 'rescheduling'",
+                    "resolved": "\"booking\" | \"rescheduling\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Booking flow type."
+                },
+                "attribute": "booking-flow",
+                "reflect": false,
+                "defaultValue": "'booking'"
+            },
+            "bookingInfo": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasSchedulerBookingData",
+                    "resolved": "any",
+                    "references": {
+                        "NylasSchedulerBookingData": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The booking info used to book / reschedule the event."
+                },
+                "attribute": "booking-info",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "cancelBookingButtonClicked",
+                "name": "cancelBookingButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Cancel booking button clicked event."
+                },
+                "complexType": {
+                    "original": "{ bookingId: string }",
+                    "resolved": "{ bookingId: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "rescheduleButtonClicked",
+                "name": "rescheduleButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Reschedule button clicked event."
+                },
+                "complexType": {
+                    "original": "{ bookingId: string }",
+                    "resolved": "{ bookingId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-booked-event-card',
+        stateToProps: new Map([
+            ['scheduler.bookingFlow', 'bookingFlow'],
+            ['scheduler.bookingInfo', 'bookingInfo'],
+        ]),
+        eventToProps: {
+            cancelBookingButtonClicked: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId);
+            },
+            rescheduleButtonClicked: async (event, nylasSchedulerConnector) => {
+                await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasBookedEventCard.prototype, "render", null);
+//# sourceMappingURL=nylas-booked-event-card.js.map

package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nylas-booked-event-card.js","sourceRoot":"","sources":["../../../../src/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,yBAAyB,EAA2B,MAAM,UAAU,CAAC;AAE9E,OAAO,oEAAoE,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiBtC,MAAM,OAAO,oBAAoB;;QAsCvB,qCAAgC,GAAG,GAAG,EAAE;YAC9C,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,CAAC,CAAC;QAEM,kCAA6B,GAAG,GAAG,EAAE;YAC3C,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,EAAE,CAAC,CAAC;QACtE,CAAC,CAAC;;2BAnCyD,SAAS;;;IAiBpE,iBAAiB,KAAI,CAAC;IAEtB,oBAAoB,KAAI,CAAC;IAEzB,KAAK,CAAC,iBAAiB;QACrB,KAAK,CAAC,+CAA+C,CAAC,CAAC;IACzD,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,KAAK,CAAC,8CAA8C,CAAC,CAAC;IACxD,CAAC;IA0BD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,MAAM;YACf,iEAAU,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ;gBACpD,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,oEAAyB;oBACxB,YAAY,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,CAAC,CACjD;gBACN,4DAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,YAAY;oBAC/C,4DAAK,KAAK,EAAC,eAAe;wBACxB,6EAAuB,CACnB;oBACN,4DAAK,KAAK,EAAC,qBAAqB;wBAC9B,2DAAI,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,aAAa;;4BAC7B,IAAI,CAAC,WAAW,KAAK,cAAc,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW;gCACvE;wBACL,4DAAK,IAAI,EAAC,mBAAmB;4BAC1B,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,CAAC,KAAK;;4BAAqB,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,CACzH,CACF;oBACN,oEAAyB;oBACzB,4DAAK,KAAK,EAAC,mBAAmB;wBAC5B,+EAA+C;wBAC/C,qFAA8B;wBAC9B;4BACG,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;;4BAAE,4DAAM;4BACtH,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,UAAU,GAAG,IAAI,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;;4BAAI,GAAG;4BACtH,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,QAAQ,GAAG,IAAI,CAAC,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAC5G,CACA;oBACN,4DAAK,KAAK,EAAC,sBAAsB;wBAC/B,qEAA2B;wBAC3B,gFAAyB;wBACxB,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,IAAI,CACzD;4BACG,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,SAAS,CAAC,KAAK,cAAc;4BAC9E,aAAM;4BACL,IAAI,CAAC,SAAS,EAAE,YAAY,EAAE,YAAY,CAAC,GAAG,CAAC,CAAC,WAAgB,EAAE,EAAE;gCACnE,OAAO,CACL,YAAM,KAAK,EAAC,OAAO;oCAChB,WAAW,CAAC,KAAK;oCAAE,GAAG;oCACtB,WAAW,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,IAAI,IAAI,WAAW,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAC7I,CACR,CAAC;4BACJ,CAAC,CAAC,CACA,CACL,CACG;oBACN,oEAAyB;oBACzB,4DAAK,KAAK,EAAC,QAAQ;wBACjB,kEACE,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,IAAI,CAAC,gCAAgC,EAC9C,IAAI,EAAC,uCAAuC,qBAGlC;wBACZ,kEACE,OAAO,EAAC,WAAW,EACnB,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,YAAY,EAClB,OAAO,EAAE,IAAI,CAAC,6BAA6B,EAC3C,IAAI,EAAC,2CAA2C,iBAGtC,CACR,CACF,CACG,CACN,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AA5EC;IAhBC,iBAAiB,CAA8F;QAC9G,IAAI,EAAE,yBAAyB;QAC/B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,uBAAuB,EAAE,aAAa,CAAC;SACzC,CAAC;QACF,YAAY,EAAE;YACZ,0BAA0B,EAAE,KAAK,EAAE,KAAyC,EAAE,uBAAgD,EAAE,EAAE;gBAChI,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAC1E,CAAC;YACD,uBAAuB,EAAE,KAAK,EAAE,KAAyC,EAAE,uBAAgD,EAAE,EAAE;gBAC7H,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YAChF,CAAC;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;kDA4ED","sourcesContent":["import { RegisterComponent } from '@/common/register-component';\nimport { Component, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport { NylasSchedulerBookingData, NylasSchedulerConnector } from '../../..';\nimport { NylasScheduler } from '../nylas-scheduler/nylas-scheduler';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-left';\nimport { debug } from '@/utils/utils';\nimport { TIMEZONE_MAP } from '@/common/constants';\nimport { NylasEvent } from '@/common/types';\nimport { Event } from '@stencil/core';\n\n/**\n * The booked event card component.\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 bookingFlow: 'booking' | 'rescheduling' = 'booking';\n\n  /**\n   * The booking info used to book / reschedule the event.\n   */\n  @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\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 }>;\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.id });\n  };\n\n  private handleRescheduleButtonClicked = () => {\n    this.rescheduleButtonClicked.emit({ bookingId: this.eventInfo.id });\n  };\n\n  @RegisterComponent<NylasBookedEventCard, NylasSchedulerConnector, Exclude<NylasScheduler['stores'], undefined>>({\n    name: 'nylas-booked-event-card',\n    stateToProps: new Map([\n      ['scheduler.bookingFlow', 'bookingFlow'],\n      ['scheduler.bookingInfo', 'bookingInfo'],\n    ]),\n    eventToProps: {\n      cancelBookingButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId);\n      },\n      rescheduleButtonClicked: async (event: CustomEvent<{ bookingId: string }>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n        await nylasSchedulerConnector.scheduler.setReschedule(event.detail.bookingId);\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.eventInfo?.booking_data?.timezone]}\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.bookingFlow === 'rescheduling' ? 'rescheduled' : 'confirmed'}!\n              </h2>\n              <div part=\"nbec__description\">\n                {this.eventInfo?.config?.data?.event_booking?.organizer.email} &nbsp;&amp;&nbsp; {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.eventInfo?.booking_data?.start_time * 1000).toLocaleDateString(undefined, { dateStyle: 'full' })} <br />\n                {new Date(this.eventInfo?.booking_data?.start_time * 1000).toLocaleTimeString(undefined, { timeStyle: 'short' })} -{' '}\n                {new Date(this.eventInfo?.booking_data?.end_time * 1000).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?.config?.data?.event_booking?.organizer && (\n                <p>\n                  {`${this.eventInfo?.config?.data?.event_booking?.organizer.email} (organizer)`}\n                  <br />\n                  {this.eventInfo?.booking_data?.participants.map((participant: any) => {\n                    return (\n                      <span class=\"block\">\n                        {participant.email}{' '}\n                        {participant.name == this.bookingInfo?.primaryParticipant?.name || participant.email == this.bookingInfo?.primaryParticipant?.email ? '(You)' : ''}\n                      </span>\n                    );\n                  })}\n                </p>\n              )}\n            </div>\n            <sp-divider></sp-divider>\n            <div class=\"footer\">\n              <sp-button\n                variant=\"secondary\"\n                treatment=\"outline\"\n                size=\"xl\"\n                class=\"cancel\"\n                onClick={this.handleCancelBookingButtonClicked}\n                part=\"nbec__button-outline nbec__cancel-cta\"\n              >\n                Cancel booking\n              </sp-button>\n              <sp-button\n                variant=\"secondary\"\n                treatment=\"outline\"\n                size=\"xl\"\n                class=\"reschedule\"\n                onClick={this.handleRescheduleButtonClicked}\n                part=\"nbec__button-outline nbec__reschedule-cta\"\n              >\n                Reschedule\n              </sp-button>\n            </div>\n          </div>\n        </sp-theme>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.css

@@ -0,0 +1,129 @@
+:host {
+  display: block;
+}
+
+.nylas-booking-form {
+  width: 100%;
+  padding: 1.5rem;
+  box-sizing: border-box;
+  height: 450px;
+  overflow-y: auto;
+}
+
+form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.error {
+  padding: 0.5rem 1rem;
+  background: var(--nylas-error);
+  color: var(--nylas-base-25);
+  border-radius: var(--nylas-border-radius-2x);
+  font-weight: 600;
+}
+
+sp-field-label {
+  font-size: 14px;
+  color: var(--nylas-base-800);
+}
+
+sp-textfield {
+  --spectrum-textfield-border-color: var(--nylas-base-300);
+  position: relative;
+  width: 100%;
+  height: 48px;
+  margin-bottom: 16px;
+  background-color: var(--nylas-base-100);
+  color: var(--nylas-base-500);
+}
+
+.cta {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  box-sizing: border-box;
+  border-top: 1px solid var(--nylas-base-100);
+}
+
+sp-button {
+  background-color: transparent;
+  color: var(--nylas-base-800);
+  border-radius: var(--nylas-border-radius-2x);
+}
+sp-button:hover {
+  background-color: var(--nylas-base-100);
+  color: var(--nylas-primary);
+  border-radius: var(--nylas-border-radius-2x);
+}
+sp-button:active {
+  background-color: var(--nylas-base-200);
+  color: var(--nylas-base-800);
+}
+sp-button.back {
+  width: 50%;
+  background-color: transparent;
+  color: var(--nylas-base-600);
+  border: 1px solid var(--nylas-base-300);
+}
+sp-button.back:hover {
+  border-color: var(--nylas-primary);
+}
+sp-button.back:active {
+  border: 2px solid var(--nylas-base-800);
+}
+sp-button.book {
+  width: 50%;
+  background-color: var(--nylas-primary);
+  color: var(--nylas-base-0);
+}
+sp-button.book:hover {
+  background-color: var(--nylas-base-600);
+}
+sp-button.book:active {
+  background-color: var(--nylas-base-800);
+}
+
+.input-wrapper sp-button {
+  margin-bottom: 1rem;
+}
+
+.button-wrapper {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  height: max-content;
+  position: relative;
+}
+
+sp-infield-button {
+  --spectrum-infield-button-background-color: transparent;
+  --spectrum-infield-button-background-color-hover: transparent;
+  --spectrum-infield-button-background-color-active: transparent;
+  --spectrum-infield-button-border-color: transparent;
+  --spectrum-infield-button-border-width: 1px;
+  --spectrum-infield-button-border-radius: 0;
+  color: var(--nylas-base-600);
+  background: transparent;
+  border: 1px solid var(--nylas-base-300);
+  border-radius: 0 var(--nylas-border-radius) var(--nylas-border-radius) 0;
+  height: 48px;
+  width: 48px;
+  display: flex;
+  position: absolute;
+  right: 0;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+sp-infield-button sp-icon-cross300 {
+  color: var(--nylas-base-600);
+}

package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.js

@@ -0,0 +1,323 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
+        return Reflect.metadata(k, v);
+};
+import { Host, h } from "@stencil/core";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-add-circle";
+import "@spectrum-web-components/icons-workflow/icons/sp-icon-remove-circle";
+import { RegisterComponent } from "../../../common/register-component";
+import { debug } from "../../../utils/utils";
+export class NylasBookingForm {
+    constructor() {
+        this.handleGuestChange = (guestIndex, email) => {
+            if (email === '') {
+                return;
+            }
+            const guests = [...this.guestEmails];
+            guests[guestIndex] = email;
+            this.guestEmails = [...guests];
+        };
+        this.addGuestButtonClickedHandler = () => {
+            this.guestEmails = [...this.guestEmails, ''];
+        };
+        this.removeGuestButtonClickHandler = (e, guestIndex) => {
+            e.preventDefault();
+            const guests = [...this.guestEmails];
+            guests.splice(guestIndex, 1);
+            this.guestEmails = [...guests];
+        };
+        this.handleBackButtonClicked = () => {
+            this.backButtonClicked.emit();
+        };
+        this.bookButtonClickedHandler = async (e) => {
+            e.preventDefault();
+            debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);
+            const name = this.name || this.bookingInfo?.primaryParticipant?.name;
+            const email = this.email || this.bookingInfo?.primaryParticipant?.email;
+            if (!name || name === '') {
+                this.isNameValid = false;
+                return;
+            }
+            if (!email || email === '') {
+                this.isEmailValid = false;
+                return;
+            }
+            let guests = [];
+            if (this.guestEmails.length > 0) {
+                guests = this.guestEmails.map((email) => ({ name: '', email: email.trim() }));
+            }
+            else if (this.bookingInfo?.guests) {
+                guests = this.bookingInfo?.guests;
+            }
+            this.detailsConfirmed.emit({
+                primaryParticipant: {
+                    name: name,
+                    email: email,
+                },
+                guests: guests,
+                additionalFields: {
+                    ...this.bookingInfo?.additionalFields,
+                },
+            });
+        };
+        this.bookedEventLoading = false;
+        this.bookedEventError = undefined;
+        this.bookingInfo = undefined;
+        this.eventInfo = undefined;
+        this.name = '';
+        this.email = '';
+        this.guestEmails = [];
+        this.isNameValid = true;
+        this.isEmailValid = true;
+    }
+    connectedCallback() { }
+    disconnectedCallback() { }
+    componentWillLoad() {
+        debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
+        if (this.bookingInfo) {
+            this.name = this.bookingInfo.primaryParticipant?.name;
+            this.email = this.bookingInfo.primaryParticipant?.email;
+        }
+    }
+    bookingInfoChangedHandler(newValue) {
+        if (newValue && newValue.primaryParticipant) {
+            this.name = newValue.primaryParticipant.name;
+            this.email = newValue.primaryParticipant.email;
+        }
+    }
+    changeName(name) {
+        this.name = name;
+        this.nameChanged.emit(name);
+    }
+    changeEmail(email) {
+        this.email = email;
+        this.emailChanged.emit(email);
+    }
+    render() {
+        return (h(Host, { key: 'd1b5e42daaf9155d36be5aba04642b89d72c3006' }, h("sp-theme", { key: '33eeac6223a0f340ad0d0d79915e5d8bc4b43f80', theme: "spectrum", color: "light", scale: "medium" }, h("form", { key: '618fc2aceaefb86274709fa6f515feeb3f5296bf', onSubmit: e => this.bookButtonClickedHandler(e) }, h("div", { key: '81f12bae5be882228409f434625b1786103dc5f4', class: "nylas-booking-form" }, this.bookedEventError && h("div", { class: 'error' }, "Something went wrong, please try again later."), h("slot", { key: 'a47185490947bff761fdc2866827756a2ac89b7a', name: "custom-booking-form" }, h("div", { key: 'ba30a43eaa91ab4fbbe1e854f58e2fb8261e9697', class: "input-wrapper" }, h("sp-field-label", { key: '15d1aa9618cb7d51b02263c930244734a372a7ed', required: true, size: "xl", for: "name-0-m", part: "nbf__input-label" }, "Name"), h("sp-textfield", { key: 'cb49bb4ac417a51bb791188c52760a8528978086', id: "name-0-m", size: "xl", placeholder: "Enter your name", value: this.name, invalid: !this.isNameValid, part: "nbf__input-textfield", onChange: (e) => this.changeName(e.target?.value) })), h("div", { key: '4e5f5c838366b75edf633e902863be4c688ef433', class: "input-wrapper" }, h("sp-field-label", { key: '80db8aa592a0ea8ed2cf225e658dda682d6d45bd', required: true, size: "xl", for: "email-0-m", part: "nbf__input-label" }, "Email"), h("sp-textfield", { key: '57b09051465afe3bc1f236bdf8425d944f11b46a', id: "email-0-m", size: "xl", placeholder: "Enter your email", value: this.email, invalid: !this.isEmailValid, part: "nbf__input-textfield", onChange: (e) => this.changeEmail(e.target?.value) })), h("div", { key: '4ea1880e69b9bd417e695aa9e052198b6b714a25', class: "input-wrapper" }, h("sp-button", { key: '97589401abd16e760c4d0366d7033a5fc9bede06', class: "add-guest", variant: "primary", part: "nbf__button-ghost", onClick: this.addGuestButtonClickedHandler }, h("sp-icon-add-circle", { key: '200a59dc938d5ea8db764b9b4f0cfde4b2e94524', slot: "icon" }), "Add guest"), this.guestEmails.map((email, index) => (h("div", { class: "input-wrapper button-wrapper" }, h("sp-textfield", { id: `guest-email-${index}-m`, size: "xl", class: "guest-email", placeholder: "Enter guest email", value: email, part: "nbf__input-textfield", onChange: (e) => this.handleGuestChange(index, e.target?.value) }), h("sp-infield-button", { size: "s", class: "remove-guest", treatment: "outline", inline: "end", onClick: (e) => this.removeGuestButtonClickHandler(e, index) }, h("sp-icon-cross300", { size: "s" })))))))), h("div", { key: '6d8daa11ae3f21fd09c05eb5fbff0ee8cfa719ef', class: "cta" }, h("sp-button", { key: '730d4d1418e6ed8bfecd8145b5e2d649f671cd31', treatment: "outline", variant: "secondary", class: 'back', part: "nbf__button-outline", size: "xl", onClick: this.handleBackButtonClicked }, "Back"), h("sp-button", { key: 'e4eae4433807cfec0bb14e733442156977e5362b', variant: "primary", class: 'book', part: "nbf__button-primary", type: "submit", size: "xl" }, this.bookedEventLoading && h("loading-icon", { slot: "icon" }), "Book now"))))));
+    }
+    static get is() { return "nylas-booking-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["nylas-booking-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["nylas-booking-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "bookedEventLoading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "booked-event-loading",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "bookedEventError": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasErrorResponse",
+                    "resolved": "any",
+                    "references": {
+                        "NylasErrorResponse": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "booked-event-error",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "bookingInfo": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasSchedulerBookingData",
+                    "resolved": "any",
+                    "references": {
+                        "NylasSchedulerBookingData": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The booking info."
+                },
+                "attribute": "booking-info",
+                "reflect": false
+            },
+            "eventInfo": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "NylasEvent",
+                    "resolved": "undefined | { id: string; event_id: string; owner_email: string; status: string; booking_data: { participants: { email: string; name: string; }[]; duration: number; event_type: number; start_time: number; end_time: number; title: string; description: string; timezone: string; }; created_at: string; updated_at: string; config: { id: number; data: { version: string; availability: { duration_minutes: number; interval_minutes: number; round_to_30_minutes: boolean; participants: { email: string; name: string; calendar_ids: string[]; open_hours: { days: number[]; timezone: string; start: string; end: string; }[]; }[]; }; event_booking: { title: string; description: string; type: number; organizer: { email: string; calendar_id: string; }; }; }; created_at: string; updated_at: string; is_session_defined: boolean; }; }",
+                    "references": {
+                        "NylasEvent": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::NylasEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The booked event (Used to track if a booking is created in an eventOverride)."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "name": {},
+            "email": {},
+            "guestEmails": {},
+            "isNameValid": {},
+            "isEmailValid": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "nameChanged",
+                "name": "nameChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the name is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "emailChanged",
+                "name": "emailChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the email is changed."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "backButtonClicked",
+                "name": "backButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the cancel button is clicked."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }, {
+                "method": "detailsConfirmed",
+                "name": "detailsConfirmed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This event is fired when the book button is clicked."
+                },
+                "complexType": {
+                    "original": "NylasSchedulerBookingData",
+                    "resolved": "NylasSchedulerBookingData",
+                    "references": {
+                        "NylasSchedulerBookingData": {
+                            "location": "import",
+                            "path": "../../..",
+                            "id": "src/index.ts::unknown"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "bookingInfo",
+                "methodName": "bookingInfoChangedHandler"
+            }];
+    }
+}
+__decorate([
+    RegisterComponent({
+        name: 'nylas-booking-form',
+        stateToProps: new Map([
+            ['scheduler.bookedEventLoading', 'bookedEventLoading'],
+            ['scheduler.bookedEventError', 'bookedEventError'],
+            ['scheduler.bookingInfo', 'bookingInfo'],
+            ['scheduler.eventInfo', 'eventInfo'],
+        ]),
+        eventToProps: {
+            backButtonClicked: async (_event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.toggleAdditionalData(false);
+            },
+            nameChanged: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.setParticipantName(event.detail);
+            },
+            emailChanged: async (event, nylasSchedulerConnector) => {
+                nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);
+            },
+        },
+        fireRegisterEvent: true,
+    }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], NylasBookingForm.prototype, "render", null);
+//# sourceMappingURL=nylas-booking-form.js.map