@nylas/web-elements 0.0.0-canary-20241008193213 → 0.0.0-canary-20241015194719

package/dist/components/nylas-scheduling-method2.js

@@ -32,8 +32,8 @@ const NylasSchedulingMethod = proxyCustomElement(class NylasSchedulingMethod ext
         this.__attachShadow();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.internals = this.attachInternals();
-        this.name = 'availability-method';
         this.selectedConfiguration = undefined;
+        this.name = 'availability-method';
         this.participantOptions = undefined;
         this.readOnly = false;
         this.selectedBookingType = '';
@@ -109,8 +109,8 @@ const NylasSchedulingMethod = proxyCustomElement(class NylasSchedulingMethod ext
     }; }
     static get style() { return NylasSchedulingMethodStyle0; }
 }, [65, "nylas-scheduling-method", {
-        "name": [1],
         "selectedConfiguration": [16],
+        "name": [1],
         "participantOptions": [16],
         "readOnly": [4, "read-only"],
         "selectedBookingType": [32]
@@ -120,10 +120,8 @@ const NylasSchedulingMethod = proxyCustomElement(class NylasSchedulingMethod ext
 __decorate([
     RegisterComponent({
         name: 'nylas-scheduling-method',
-        stateToProps: new Map([
-            ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],
-            ['schedulerConfig.additionalParticipants', 'participantOptions'],
-        ]),
+        stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),
+        localPropsToProp: new Map([['additionalParticipants', 'participantOptions']]),
         eventToProps: {
             valueChanged: async (event, _nylasSchedulerConfigConnector) => {
                 const { valueChanged } = event.detail;

package/dist/components/nylas-scheduling-method2.js.map

@@ -1 +1 @@
-{"file":"nylas-scheduling-method2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.scss?tag=nylas-scheduling-method&encapsulation=shadow","src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-scheduling-method {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n\n    h3 {\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n  }\n\n  .nylas-scheduling-method__dropdown {\n    padding: 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n\n    span.nylas-scheduling-method__dropdown-label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n      margin: 0.25rem 0 0 0;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      text-align: left;\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\n\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n    }\n\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\n\n    input-component::part(ic__input) {\n      background: var(--nylas-base-50);\n      outline: none;\n      cursor: not-allowed;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AdditionalParticipant, Configuration } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker.\n * @part nsm - The booking calendar picker container\n * @part nsm__header - The header of the booking calendar picker\n * @part nsm__input-label - The input label of the booking calendar picker\n * @part nsm__dropdown - The dropdown container\n * @part nsm__dropdown-button - The dropdown button\n * @part nsm__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-scheduling-method',\n  styleUrl: 'nylas-scheduling-method.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasSchedulingMethod {\n  @Element() host!: HTMLNylasSchedulingMethodElement;\n\n  /**\n   * The name of the booking type picker.\n   */\n  @Prop() name: string = 'availability-method';\n  /**\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * The participant options passed in the additionalParticipants prop\n   * from the nylas-scheduler-editor component.\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n  /**\n   * This prop is used to display the component in a disabled state / read-only mode.\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected booking type.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected booking calendar changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-scheduling-method', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-scheduling-method', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-scheduling-method', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-scheduling-method', 'componentDidLoad');\n    const bookingtType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n\n    // TODO: Remove this when the internals in tests are fixed.\n    if (bookingtType && typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(bookingtType, 'booking-calendar');\n    }\n    this.selectedBookingType = bookingtType || 'collective';\n    this.valueChanged.emit({ value: this.selectedBookingType, name: this.name });\n  }\n\n  componentWillUpdate() {\n    debug('nylas-scheduling-method', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-scheduling-method', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-scheduling-method', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-scheduling-method', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-scheduling-method', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-scheduling-method', 'nylasFormDropdownChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value } = event.detail;\n      if (value) {\n        this.selectedBookingType = value;\n        this.internals.setFormValue(value, this.name);\n      }\n    };\n    this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n  }\n\n  @RegisterComponent<NylasSchedulingMethod, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-scheduling-method',\n    stateToProps: new Map([\n      ['schedulerConfig.selectedConfiguration', 'selectedConfiguration'],\n      ['schedulerConfig.additionalParticipants', 'participantOptions'],\n    ]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingTypeOptions = [\n      { label: 'Standard booking', value: 'collective' },\n      { label: 'Round-robin max fairness', value: 'max-fairness' },\n      { label: 'Round-robin max availability', value: 'max-availability' },\n    ];\n    const defaultBookingType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n    const hasAdditionalParticipants =\n      this.participantOptions &&\n      this.participantOptions?.length > 0 &&\n      !!this.participantOptions[0].email &&\n      !!this.participantOptions[0].name &&\n      !!this.participantOptions[0].calendars &&\n      this.participantOptions[0].calendars.length > 0;\n\n    // If a default availability method is set in the configuration (developer settings), do not show the booking type picker.\n    // Or, if a default availability method is not set and there are no additional participants, do not show the booking type picker.\n    if ((defaultBookingType || !hasAdditionalParticipants) && !this.readOnly) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <div class=\"nylas-scheduling-method\" part=\"nsm\">\n          <div class=\"header\" part=\"nsm__header\">\n            <h3>Scheduling method</h3>\n          </div>\n          <div class=\"nylas-scheduling-method__dropdown\">\n            <span class=\"nylas-scheduling-method__dropdown-label\">\n              Select a scheduling method for the event.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  <strong>Standard Booking</strong>\n                  <br />\n                  - Allows 1:1 bookings, or n:1 bookings with additional participants.\n                  <br />\n                  <br />\n                  <strong>Round-Robin Maximize Fairness</strong>\n                  <br />\n                  - Rotates through the list of participants you select, displaying the participant with the fewest recent bookings.\n                  <br />\n                  <br />\n                  <strong>Round-Robin Maximize Availability</strong>\n                  <br />\n                  - Rotates through the list of participants you select, prioritizing participants with the fewest recent bookings, but making as many time-slots available as\n                  possible.\n                  <br />\n                </span>\n              </tooltip-component>\n            </span>\n            {this.readOnly ? (\n              <input-component\n                name=\"availability-method-read-only\"\n                type=\"text\"\n                exportparts=\"ic__label: nsm__input-label, ic__input: nsm__input, ic__input_wrapper: nsm__input_wrapper\"\n                readOnly\n                defaultValue={bookingTypeOptions.find(cal => cal.value == defaultBookingType)?.label ?? bookingTypeOptions[0].label}\n              />\n            ) : (\n              <select-dropdown\n                name={this.name}\n                options={bookingTypeOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: nsm__dropdown, sd_dropdown-button: nsm__dropdown-button, sd_dropdown-content: nsm__dropdown-content\"\n                defaultSelectedOption={bookingTypeOptions.find(cal => cal.value == defaultBookingType) ?? bookingTypeOptions[0]}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"nylas-scheduling-method2.js","mappings":"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","names":[],"sources":["src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.scss?tag=nylas-scheduling-method&encapsulation=shadow","src/components/scheduler-editor/nylas-scheduling-method/nylas-scheduling-method.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n  display: block;\n  @include default-css-variables;\n  width: inherit;\n}\n\n.nylas-scheduling-method {\n  width: inherit;\n  display: flex;\n  flex-direction: column;\n  margin: 1rem;\n  border-radius: var(--nylas-border-radius-2x);\n  border: 1px solid var(--nylas-base-200);\n\n  .header {\n    padding: 1rem;\n    border-bottom: 1px solid var(--nylas-base-200);\n\n    h3 {\n      margin: 0;\n      font-size: 1rem;\n      font-weight: 600;\n      line-height: 20px;\n      color: var(--nylas-base-900);\n      text-align: left;\n    }\n  }\n\n  .nylas-scheduling-method__dropdown {\n    padding: 1rem;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n\n    span.nylas-scheduling-method__dropdown-label {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      color: var(--nylas-base-800);\n      margin: 0.25rem 0 0 0;\n      font-size: 14px;\n      font-weight: 400;\n      line-height: 20px;\n      text-align: left;\n\n      tooltip-component {\n        display: flex;\n      }\n    }\n\n    select-dropdown::part(sd_dropdown) {\n      width: 100%;\n    }\n\n    select-dropdown::part(sd_dropdown-content) {\n      width: 100%;\n      max-width: unset;\n    }\n\n    select-dropdown::part(sd_dropdown-button) {\n      width: 100%;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      border: 1px solid var(--nylas-base-200);\n      border-radius: var(--nylas-border-radius-2x);\n    }\n\n    select-dropdown::part(sd_dropdown-button-selected-label) {\n      max-width: calc(100% - 2rem);\n      font-family: var(--nylas-font-family);\n      font-size: 16px;\n      line-height: 24px;\n    }\n\n    input-component::part(ic__input) {\n      background: var(--nylas-base-50);\n      outline: none;\n      cursor: not-allowed;\n    }\n  }\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConfigConnector } from '@/connector/nylas-scheduler-config-connector';\nimport { debug } from '@/utils/utils';\nimport { AdditionalParticipant, Configuration } from '@nylas/core';\nimport { AttachInternals, Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { NylasSchedulerEditor } from '../nylas-scheduler-editor/nylas-scheduler-editor';\n\n/**\n * The `nylas-scheduling-method` component is a UI component that displays the booking calendar picker.\n * @part nsm - The booking calendar picker container\n * @part nsm__header - The header of the booking calendar picker\n * @part nsm__input-label - The input label of the booking calendar picker\n * @part nsm__dropdown - The dropdown container\n * @part nsm__dropdown-button - The dropdown button\n * @part nsm__dropdown-content - The dropdown content\n */\n@Component({\n  tag: 'nylas-scheduling-method',\n  styleUrl: 'nylas-scheduling-method.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class NylasSchedulingMethod {\n  @Element() host!: HTMLNylasSchedulingMethodElement;\n\n  /**\n   * @standalone\n   * The selected config\n   */\n  @Prop() selectedConfiguration?: Configuration;\n  /**\n   * @standalone\n   * The name of the booking type picker.\n   */\n  @Prop() name: string = 'availability-method';\n  /**\n   * @standalone\n   * The participant options passed in the additionalParticipants prop\n   * from the nylas-scheduler-editor component.\n   */\n  @Prop() participantOptions?: AdditionalParticipant[];\n  /**\n   * This prop is used to display the component in a disabled state / read-only mode.\n   */\n  @Prop() readOnly: boolean = false;\n\n  /**\n   * The element internals.\n   */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * The selected booking type.\n   */\n  @State() selectedBookingType: string = '';\n\n  /**\n   * This event is fired when the selected booking calendar changes.\n   */\n  @Event() valueChanged!: EventEmitter<{\n    value: string;\n    name: string;\n    valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void;\n  }>;\n\n  // Lifecycle methods\n  connectedCallback() {\n    debug('nylas-scheduling-method', 'connectedCallback');\n  }\n\n  disconnectedCallback() {\n    debug('nylas-scheduling-method', 'disconnectedCallback');\n  }\n\n  componentWillLoad() {\n    debug('nylas-scheduling-method', 'componentWillLoad');\n    // See comment in the @Watch('name') decorator for more information.\n    this.host.setAttribute('name', this.name);\n  }\n\n  componentDidLoad() {\n    debug('nylas-scheduling-method', 'componentDidLoad');\n    const bookingtType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n\n    // TODO: Remove this when the internals in tests are fixed.\n    if (bookingtType && typeof this.internals.setFormValue === 'function') {\n      this.internals.setFormValue(bookingtType, 'booking-calendar');\n    }\n    this.selectedBookingType = bookingtType || 'collective';\n    this.valueChanged.emit({ value: this.selectedBookingType, name: this.name });\n  }\n\n  componentWillUpdate() {\n    debug('nylas-scheduling-method', 'componentWillUpdate');\n  }\n\n  componentDidUpdate() {\n    debug('nylas-scheduling-method', 'componentDidUpdate');\n  }\n\n  componentWillRender() {\n    debug('nylas-scheduling-method', 'componentWillRender');\n  }\n\n  componentDidRender() {\n    debug('nylas-scheduling-method', 'componentDidRender');\n  }\n\n  /**\n   * When a name prop is passed, stencil does not automatically set the name attribute on the host element.\n   * Since this component is form-associated, the name attribute is required for form submission.\n   * This is a workaround to ensure that the name attribute is set on the host element.\n   */\n  @Watch('name')\n  elementNameChangedHandler(newValue: string) {\n    debug('nylas-scheduling-method', 'elementNameChangedHandler', newValue);\n    this.host.setAttribute('name', newValue);\n  }\n\n  @Listen('nylasFormDropdownChanged')\n  nylasFormDropdownChangedHandler(event: CustomEvent<{ value: string; name: string }>) {\n    debug('nylas-scheduling-method', 'nylasFormDropdownChangedHandler', event.detail);\n    // Pass as handler so that if event.defaultPrevented by parent app, this will be skipped.\n    const valueChanged = (event: CustomEvent<{ value: string; name: string }>) => {\n      const { value } = event.detail;\n      if (value) {\n        this.selectedBookingType = value;\n        this.internals.setFormValue(value, this.name);\n      }\n    };\n    this.valueChanged.emit({ value: event.detail.value, name: this.name, valueChanged });\n  }\n\n  @RegisterComponent<NylasSchedulingMethod, NylasSchedulerConfigConnector, Exclude<NylasSchedulerEditor['stores'], undefined>>({\n    name: 'nylas-scheduling-method',\n    stateToProps: new Map([['schedulerConfig.selectedConfiguration', 'selectedConfiguration']]),\n    localPropsToProp: new Map([['additionalParticipants', 'participantOptions']]),\n    eventToProps: {\n      valueChanged: async (\n        event: CustomEvent<{ value: string; name: string; valueChanged?: (event: CustomEvent<{ value: string; name: string }>) => void }>,\n        _nylasSchedulerConfigConnector: NylasSchedulerConfigConnector,\n      ) => {\n        const { valueChanged } = event.detail;\n        // If a handler is passed, call it.\n        if (valueChanged) {\n          valueChanged(event);\n        }\n      },\n    },\n    fireRegisterEvent: true,\n  })\n  render() {\n    const bookingTypeOptions = [\n      { label: 'Standard booking', value: 'collective' },\n      { label: 'Round-robin max fairness', value: 'max-fairness' },\n      { label: 'Round-robin max availability', value: 'max-availability' },\n    ];\n    const defaultBookingType = this.selectedConfiguration?.availability?.availability_rules?.availability_method?.toString();\n    const hasAdditionalParticipants =\n      this.participantOptions &&\n      this.participantOptions?.length > 0 &&\n      !!this.participantOptions[0].email &&\n      !!this.participantOptions[0].name &&\n      !!this.participantOptions[0].calendars &&\n      this.participantOptions[0].calendars.length > 0;\n\n    // If a default availability method is set in the configuration (developer settings), do not show the booking type picker.\n    // Or, if a default availability method is not set and there are no additional participants, do not show the booking type picker.\n    if ((defaultBookingType || !hasAdditionalParticipants) && !this.readOnly) {\n      return null;\n    }\n\n    return (\n      <Host>\n        <div class=\"nylas-scheduling-method\" part=\"nsm\">\n          <div class=\"header\" part=\"nsm__header\">\n            <h3>Scheduling method</h3>\n          </div>\n          <div class=\"nylas-scheduling-method__dropdown\">\n            <span class=\"nylas-scheduling-method__dropdown-label\">\n              Select a scheduling method for the event.\n              <tooltip-component>\n                <info-icon slot=\"tooltip-icon\" />\n                <span slot=\"tooltip-content\">\n                  <strong>Standard Booking</strong>\n                  <br />\n                  - Allows 1:1 bookings, or n:1 bookings with additional participants.\n                  <br />\n                  <br />\n                  <strong>Round-Robin Maximize Fairness</strong>\n                  <br />\n                  - Rotates through the list of participants you select, displaying the participant with the fewest recent bookings.\n                  <br />\n                  <br />\n                  <strong>Round-Robin Maximize Availability</strong>\n                  <br />\n                  - Rotates through the list of participants you select, prioritizing participants with the fewest recent bookings, but making as many time-slots available as\n                  possible.\n                  <br />\n                </span>\n              </tooltip-component>\n            </span>\n            {this.readOnly ? (\n              <input-component\n                name=\"availability-method-read-only\"\n                type=\"text\"\n                exportparts=\"ic__label: nsm__input-label, ic__input: nsm__input, ic__input_wrapper: nsm__input_wrapper\"\n                readOnly\n                defaultValue={bookingTypeOptions.find(cal => cal.value == defaultBookingType)?.label ?? bookingTypeOptions[0].label}\n              />\n            ) : (\n              <select-dropdown\n                name={this.name}\n                options={bookingTypeOptions}\n                withSearch={false}\n                exportparts=\"sd_dropdown: nsm__dropdown, sd_dropdown-button: nsm__dropdown-button, sd_dropdown-content: nsm__dropdown-content\"\n                defaultSelectedOption={bookingTypeOptions.find(cal => cal.value == defaultBookingType) ?? bookingTypeOptions[0]}\n              />\n            )}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/nylas-scheduling.js

@@ -150,6 +150,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         this.refConfigId = undefined;
         this.language = navigator.language;
         this.showFeedbackModal = false;
+        this.bookingInfoConfirmed = null;
     }
     connectedCallback() {
         debug(`[nylas-scheduler] connectedCallback`);
@@ -387,8 +388,8 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         const endTime = timeslot?.end_time ? new Date(timeslot?.end_time).getTime() / 1000 : '';
         return {
             additional_guests: bookingInfo.guests,
-            guest: bookingInfo.primaryParticipant,
-            additional_fields: bookingInfo.additionalFields,
+            guest: { ...bookingInfo.primaryParticipant },
+            additional_fields: { ...bookingInfo.additionalFields },
             start_time: startTime,
             end_time: endTime,
             email_language: language,
@@ -396,11 +397,12 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         };
     }
     async bookButtonClickedHandler(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
         const bookingData = event.detail;
         const mappedBookingData = this.mapToBookingData(bookingData);
-        const storeBookingInfo = this.nylasSchedulerConnector?.schedulerStore?.get('bookingInfo');
-        const bookingInfo = { ...storeBookingInfo, ...bookingData };
-        this.stores?.scheduler.set('bookingInfo', bookingInfo);
+        this.bookingInfoConfirmed = bookingData;
         const storeRescheduleId = this.nylasSchedulerConnector?.schedulerStore?.get('rescheduleBookingId');
         const rescheduleBookingId = storeRescheduleId;
         if (rescheduleBookingId) {
@@ -545,6 +547,9 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
     onFeedbackClick() {
         this.showFeedbackModal = true;
     }
+    redirectToCustomUrl(url) {
+        window.location.assign(url);
+    }
     render() {
         const showDefaultScheduler = this.mode === 'app';
         const nylasSchedulerStore = this.baseProvider?.getStore('scheduler');
@@ -577,8 +582,16 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
             return (h(Host, null, h(SchedulerView, { nylasBranding: nylasBranding, isLoading: this.isLoading, showNotification: this.showNotification }, h("div", { class: "cancelled-event-page", part: "confirmed-event-page" }, h("nylas-confirmed-event-card", { confirmedEventInfo: confirmedEventInfo, exportparts: "ncec, ncec__icon, ncec__title, ncec__description, ncec__button-outline, ncec__card" }))), this.enableUserFeedback && (h("button-component", { id: "report-issue", variant: 'basic', onClick: () => this.onFeedbackClick() }, h("feedback-icon", null))), this.showFeedbackModal && h("nylas-feedback-form", null)));
         }
         if (showDefaultScheduler && eventInfo && redirectUrl) {
-            const recipient = this.stores?.scheduler.get('bookingInfo')?.primaryParticipant;
-            const additionalFields = this.stores?.scheduler.get('bookingInfo')?.additionalFields;
+            const recipient = this.bookingInfoConfirmed?.primaryParticipant;
+            const additionalFields = this.bookingInfoConfirmed?.additionalFields || {};
+            if (this.bookingInfo && typeof this.bookingInfo?.additionalFields !== 'undefined') {
+                const bookingInfoAdditionalFields = this.bookingInfo.additionalFields;
+                Object.keys(bookingInfoAdditionalFields).forEach(key => {
+                    if (!additionalFields[key] && bookingInfoAdditionalFields?.[key]) {
+                        additionalFields[key] = bookingInfoAdditionalFields[key].value;
+                    }
+                });
+            }
             const selectedTimeslot = this.stores?.scheduler.get('selectedTimeslot');
             const selectedTimezone = this.stores?.scheduler.get('selectedTimezone');
             const selectedLanguage = this.stores?.scheduler.get('selectedLanguage');
@@ -596,7 +609,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
             additionalFields && urlParams.set('additional_values', JSON.stringify(additionalFields));
             this.slug && urlParams.set('page_slug', this.slug);
             configurationId && urlParams.set('config_id', configurationId);
-            window.location.assign(`${redirectUrl}?${urlParams.toString()}`);
+            this.redirectToCustomUrl(`${redirectUrl}?${urlParams.toString()}`);
             return;
         }
         if (showDefaultScheduler && eventInfo) {
@@ -645,6 +658,7 @@ const NylasScheduling$1 = proxyCustomElement(class NylasScheduling extends HTMLE
         "refConfigId": [32],
         "language": [32],
         "showFeedbackModal": [32],
+        "bookingInfoConfirmed": [32],
         "getNylasSchedulerStore": [64],
         "getNylasSchedulerConnector": [64],
         "getRef": [64]