@nylas/web-elements 1.1.5 → 1.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cdn/nylas-booked-event-card/nylas-booked-event-card.es.js +155 -145
- package/dist/cdn/nylas-booking-form/nylas-booking-form.es.js +80 -70
- package/dist/cdn/nylas-cancel-booking-form/nylas-cancel-booking-form.es.js +14 -4
- package/dist/cdn/nylas-cancelled-event-card/nylas-cancelled-event-card.es.js +14 -4
- package/dist/cdn/nylas-confirmed-event-card/nylas-confirmed-event-card.es.js +14 -4
- package/dist/cdn/nylas-date-picker/nylas-date-picker.es.js +86 -73
- package/dist/cdn/nylas-editor-tabs/nylas-editor-tabs.es.js +19 -12
- package/dist/cdn/nylas-feedback-form/nylas-feedback-form.es.js +1226 -1219
- package/dist/cdn/nylas-locale-switch/nylas-locale-switch.es.js +1233 -1220
- package/dist/cdn/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.es.js +11 -4
- package/dist/cdn/nylas-scheduler-editor/nylas-scheduler-editor.es.js +19 -12
- package/dist/cdn/nylas-scheduling/nylas-scheduling.es.js +1694 -1584
- package/dist/cdn/nylas-selected-event-card/nylas-selected-event-card.es.js +14 -4
- package/dist/cdn/nylas-timeslot-picker/nylas-timeslot-picker.es.js +13 -3
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js +13 -3
- package/dist/cjs/calendar-agenda-fill-icon_54.cjs.entry.js.map +1 -1
- package/dist/cjs/google-logo-icon_4.cjs.entry.js +7 -6
- package/dist/cjs/google-logo-icon_4.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/nylas-booked-event-card.cjs.entry.js +15 -4
- package/dist/cjs/nylas-booked-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-booked-event-card_12.cjs.entry.js +142 -25
- package/dist/cjs/nylas-booked-event-card_12.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-booking-form.cjs.entry.js +16 -3
- package/dist/cjs/nylas-booking-form.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-cancel-booking-form.cjs.entry.js +13 -2
- package/dist/cjs/nylas-cancel-booking-form.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-cancelled-event-card.cjs.entry.js +13 -2
- package/dist/cjs/nylas-cancelled-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-confirmed-event-card.cjs.entry.js +13 -2
- package/dist/cjs/nylas-confirmed-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-date-picker.cjs.entry.js +16 -2
- package/dist/cjs/nylas-date-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-editor-tabs.cjs.entry.js +7 -6
- package/dist/cjs/nylas-editor-tabs.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-feedback-form.cjs.entry.js +13 -3
- package/dist/cjs/nylas-feedback-form.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-locale-switch.cjs.entry.js +18 -4
- package/dist/cjs/nylas-locale-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-organizer-confirmation-card.cjs.entry.js +12 -2
- package/dist/cjs/nylas-organizer-confirmation-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-scheduling.cjs.entry.js +11 -10
- package/dist/cjs/nylas-scheduling.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-selected-event-card.cjs.entry.js +14 -3
- package/dist/cjs/nylas-selected-event-card.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-timeslot-picker.cjs.entry.js +12 -1
- package/dist/cjs/nylas-timeslot-picker.cjs.entry.js.map +1 -1
- package/dist/cjs/nylas-web-elements.cjs.js +1 -1
- package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js +34 -3
- package/dist/collection/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.css +0 -23
- package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.js +35 -2
- package/dist/collection/components/scheduler/nylas-booking-form/nylas-booking-form.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.css +0 -23
- package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.js +32 -1
- package/dist/collection/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.js +32 -1
- package/dist/collection/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.js +32 -1
- package/dist/collection/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.css +0 -23
- package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js +35 -1
- package/dist/collection/components/scheduler/nylas-date-picker/nylas-date-picker.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-feedback-form/nylas-feedback-form.css +0 -23
- package/dist/collection/components/scheduler/nylas-feedback-form/nylas-feedback-form.js +36 -2
- package/dist/collection/components/scheduler/nylas-feedback-form/nylas-feedback-form.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.css +0 -23
- package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js +37 -3
- package/dist/collection/components/scheduler/nylas-locale-switch/nylas-locale-switch.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.js +31 -1
- package/dist/collection/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js +10 -9
- package/dist/collection/components/scheduler/nylas-scheduling/nylas-scheduling.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.css +0 -23
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js +33 -2
- package/dist/collection/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.css +0 -23
- package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js +31 -0
- package/dist/collection/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.js.map +1 -1
- package/dist/collection/components/scheduler/nylas-timeslot-picker/test/nylas-timeslot-picker.spec.js +7 -1
- package/dist/collection/components/scheduler/nylas-timeslot-picker/test/nylas-timeslot-picker.spec.js.map +1 -1
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js +5 -4
- package/dist/collection/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.js.map +1 -1
- package/dist/components/nylas-booked-event-card2.js +16 -4
- package/dist/components/nylas-booked-event-card2.js.map +1 -1
- package/dist/components/nylas-booking-form2.js +17 -3
- package/dist/components/nylas-booking-form2.js.map +1 -1
- package/dist/components/nylas-cancel-booking-form2.js +14 -2
- package/dist/components/nylas-cancel-booking-form2.js.map +1 -1
- package/dist/components/nylas-cancelled-event-card2.js +14 -2
- package/dist/components/nylas-cancelled-event-card2.js.map +1 -1
- package/dist/components/nylas-confirmed-event-card2.js +14 -2
- package/dist/components/nylas-confirmed-event-card2.js.map +1 -1
- package/dist/components/nylas-date-picker2.js +18 -3
- package/dist/components/nylas-date-picker2.js.map +1 -1
- package/dist/components/nylas-editor-tabs2.js +7 -6
- package/dist/components/nylas-editor-tabs2.js.map +1 -1
- package/dist/components/nylas-feedback-form2.js +14 -3
- package/dist/components/nylas-feedback-form2.js.map +1 -1
- package/dist/components/nylas-locale-switch2.js +20 -5
- package/dist/components/nylas-locale-switch2.js.map +1 -1
- package/dist/components/nylas-organizer-confirmation-card2.js +13 -2
- package/dist/components/nylas-organizer-confirmation-card2.js.map +1 -1
- package/dist/components/nylas-scheduling.js +11 -10
- package/dist/components/nylas-scheduling.js.map +1 -1
- package/dist/components/nylas-selected-event-card2.js +15 -3
- package/dist/components/nylas-selected-event-card2.js.map +1 -1
- package/dist/components/nylas-timeslot-picker2.js +13 -1
- package/dist/components/nylas-timeslot-picker2.js.map +1 -1
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js +13 -3
- package/dist/esm/calendar-agenda-fill-icon_54.entry.js.map +1 -1
- package/dist/esm/google-logo-icon_4.entry.js +7 -6
- package/dist/esm/google-logo-icon_4.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/nylas-booked-event-card.entry.js +16 -5
- package/dist/esm/nylas-booked-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-booked-event-card_12.entry.js +142 -25
- package/dist/esm/nylas-booked-event-card_12.entry.js.map +1 -1
- package/dist/esm/nylas-booking-form.entry.js +16 -3
- package/dist/esm/nylas-booking-form.entry.js.map +1 -1
- package/dist/esm/nylas-cancel-booking-form.entry.js +14 -3
- package/dist/esm/nylas-cancel-booking-form.entry.js.map +1 -1
- package/dist/esm/nylas-cancelled-event-card.entry.js +14 -3
- package/dist/esm/nylas-cancelled-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-confirmed-event-card.entry.js +14 -3
- package/dist/esm/nylas-confirmed-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-date-picker.entry.js +18 -4
- package/dist/esm/nylas-date-picker.entry.js.map +1 -1
- package/dist/esm/nylas-editor-tabs.entry.js +7 -6
- package/dist/esm/nylas-editor-tabs.entry.js.map +1 -1
- package/dist/esm/nylas-feedback-form.entry.js +13 -3
- package/dist/esm/nylas-feedback-form.entry.js.map +1 -1
- package/dist/esm/nylas-locale-switch.entry.js +20 -6
- package/dist/esm/nylas-locale-switch.entry.js.map +1 -1
- package/dist/esm/nylas-organizer-confirmation-card.entry.js +12 -2
- package/dist/esm/nylas-organizer-confirmation-card.entry.js.map +1 -1
- package/dist/esm/nylas-scheduling.entry.js +11 -10
- package/dist/esm/nylas-scheduling.entry.js.map +1 -1
- package/dist/esm/nylas-selected-event-card.entry.js +15 -4
- package/dist/esm/nylas-selected-event-card.entry.js.map +1 -1
- package/dist/esm/nylas-timeslot-picker.entry.js +13 -2
- package/dist/esm/nylas-timeslot-picker.entry.js.map +1 -1
- package/dist/esm/nylas-web-elements.js +1 -1
- package/dist/nylas-web-elements/nylas-booked-event-card.entry.js +16 -5
- package/dist/nylas-web-elements/nylas-booked-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-booking-form.entry.js +16 -3
- package/dist/nylas-web-elements/nylas-booking-form.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js +14 -3
- package/dist/nylas-web-elements/nylas-cancel-booking-form.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-cancelled-event-card.entry.js +14 -3
- package/dist/nylas-web-elements/nylas-cancelled-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-confirmed-event-card.entry.js +14 -3
- package/dist/nylas-web-elements/nylas-confirmed-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-date-picker.entry.js +18 -4
- package/dist/nylas-web-elements/nylas-date-picker.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-editor-tabs.entry.js +7 -6
- package/dist/nylas-web-elements/nylas-editor-tabs.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-feedback-form.entry.js +13 -3
- package/dist/nylas-web-elements/nylas-feedback-form.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-locale-switch.entry.js +20 -6
- package/dist/nylas-web-elements/nylas-locale-switch.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-organizer-confirmation-card.entry.js +12 -2
- package/dist/nylas-web-elements/nylas-organizer-confirmation-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-scheduling.entry.js +11 -10
- package/dist/nylas-web-elements/nylas-scheduling.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-selected-event-card.entry.js +15 -4
- package/dist/nylas-web-elements/nylas-selected-event-card.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-timeslot-picker.entry.js +13 -2
- package/dist/nylas-web-elements/nylas-timeslot-picker.entry.js.map +1 -1
- package/dist/nylas-web-elements/nylas-web-elements.esm.js +1 -1
- package/dist/nylas-web-elements/p-2e7f0f20.entry.js +2 -0
- package/dist/nylas-web-elements/p-2e7f0f20.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-b5b568cf.entry.js → p-368190e9.entry.js} +2 -2
- package/dist/nylas-web-elements/p-368190e9.entry.js.map +1 -0
- package/dist/nylas-web-elements/{p-e790c71f.entry.js → p-9a8047b9.entry.js} +2 -2
- package/dist/nylas-web-elements/{p-e790c71f.entry.js.map → p-9a8047b9.entry.js.map} +1 -1
- package/dist/nylas-web-elements/{p-d586ff14.entry.js → p-eba3d197.entry.js} +3 -3
- package/dist/nylas-web-elements/p-eba3d197.entry.js.map +1 -0
- package/dist/types/components/scheduler/nylas-booked-event-card/nylas-booked-event-card.d.ts +4 -1
- package/dist/types/components/scheduler/nylas-booking-form/nylas-booking-form.d.ts +5 -2
- package/dist/types/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.d.ts +4 -1
- package/dist/types/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.d.ts +4 -0
- package/dist/types/components/scheduler/nylas-confirmed-event-card/nylas-confirmed-event-card.d.ts +4 -0
- package/dist/types/components/scheduler/nylas-date-picker/nylas-date-picker.d.ts +5 -0
- package/dist/types/components/scheduler/nylas-feedback-form/nylas-feedback-form.d.ts +3 -0
- package/dist/types/components/scheduler/nylas-locale-switch/nylas-locale-switch.d.ts +5 -0
- package/dist/types/components/scheduler/nylas-organizer-confirmation-card/nylas-organizer-confirmation-card.d.ts +3 -1
- package/dist/types/components/scheduler/nylas-scheduling/nylas-scheduling.d.ts +1 -1
- package/dist/types/components/scheduler/nylas-selected-event-card/nylas-selected-event-card.d.ts +4 -1
- package/dist/types/components/scheduler/nylas-timeslot-picker/nylas-timeslot-picker.d.ts +4 -1
- package/dist/types/components/scheduler-editor/nylas-editor-tabs/nylas-editor-tabs.d.ts +1 -1
- package/dist/types/components.d.ts +88 -0
- package/package.json +1 -1
- package/dist/nylas-web-elements/p-7a1d51ab.entry.js +0 -2
- package/dist/nylas-web-elements/p-7a1d51ab.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-b5b568cf.entry.js.map +0 -1
- package/dist/nylas-web-elements/p-d586ff14.entry.js.map +0 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-c14ea8f5.js');
|
|
|
6
6
|
const registerComponent = require('./register-component-5bbc6027.js');
|
|
7
7
|
const utils = require('./utils-b430227e.js');
|
|
8
8
|
|
|
9
|
-
const nylasBookingFormCss = ":host{display:block;height:100
|
|
9
|
+
const nylasBookingFormCss = ":host{display:block;height:100%}.nylas-booking-form{width:100%;padding:1.5rem;box-sizing:border-box;height:450px;overflow-y:auto;height:100%}form{height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center}sp-textfield{--spectrum-corner-radius-100:var(--nylas-border-radius-2x);--spectrum-textfield-border-color:var(--nylas-base-300);position:relative;width:100%;height:48px;margin-bottom:16px;color:var(--nylas-base-500)}.cta{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;align-items:flex-start;justify-content:space-between;gap:0.5rem;padding:14px;box-sizing:border-box;border-top:1px solid var(--nylas-base-200)}@media screen and (max-width: 768px){.cta{grid-template-columns:1fr}}.input-wrapper{width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:1rem}.input-wrapper input::placeholder{color:var(--nylas-base-300)}.input-wrapper label,.input-wrapper input{font-family:var(--nylas-font-family);font-size:16px}.input-wrapper .help-text{margin:0;color:var(--nylas-error)}.button-wrapper{width:100%;align-items:flex-start;height:max-content;position:relative}.button-content{display:flex;gap:4px;align-items:center}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:none;outline:1px solid var(--nylas-base-300);border-radius:0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;height:52px;width:52px;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)}sp-infield-button.error{border-width:2px;border-color:var(--nylas-error)}input[type=text],input[type=email]{display:flex;height:48px;padding-left:16px;align-items:center;gap:8px;align-self:stretch;border-radius:var(--nylas-border-radius-2x);border:1px solid var(--nylas-base-300);background:var(--nylas-base-0);width:-webkit-fill-available;color:var(--nylas-base-900);font-size:16px;font-style:normal;font-weight:400;line-height:150%}input[type=text]:focus,input[type=email]:focus{outline-color:var(--nylas-primary)}input[type=text].error,input[type=email].error{border-radius:var(--nylas-border-radius-2x);font-weight:600;border-color:var(--nylas-error);border-width:2px}input[type=text].error::placeholder,input[type=email].error::placeholder{font-weight:400}input[type=text]::placeholder,input[type=email]::placeholder{color:var(--nylas-base-300)}input[type=text].guest-email,input[type=email].guest-email{color:var(--nylas-base-900);padding-right:52px}label{display:flex;color:var(--nylas-base-800, #293056);font-size:14px;font-style:normal;font-weight:400;line-height:150%}label.error{color:var(--nylas-error)}label span.required{color:var(--nylas-error);padding:0 0.25rem}button-component.remove-guest{position:absolute;height:51px;right:0}button-component.remove-guest.error button{border-color:var(--nylas-error)}button-component.remove-guest button{height:inherit;border-top-left-radius:initial;border-bottom-left-radius:initial;border:none !important;border-left:1px solid var(--nylas-base-300) !important}button-component.remove-guest button:hover,button-component.remove-guest button:focus{outline:1px solid var(--nylas-primary) !important;color:var(--nylas-primary)}button-component.back button{--dot-color:var(--nylas-base-800)}.guest-email-input{position:relative;display:flex;width:100%}";
|
|
10
10
|
|
|
11
11
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
12
12
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -154,6 +154,7 @@ const NylasBookingForm = class {
|
|
|
154
154
|
this.bookingInfo = undefined;
|
|
155
155
|
this.eventInfo = undefined;
|
|
156
156
|
this.configSettings = undefined;
|
|
157
|
+
this.themeConfig = undefined;
|
|
157
158
|
this.name = '';
|
|
158
159
|
this.email = '';
|
|
159
160
|
this.guestEmails = [];
|
|
@@ -168,10 +169,14 @@ const NylasBookingForm = class {
|
|
|
168
169
|
disconnectedCallback() { }
|
|
169
170
|
componentWillLoad() {
|
|
170
171
|
utils.debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);
|
|
172
|
+
}
|
|
173
|
+
componentDidLoad() {
|
|
174
|
+
utils.debug('nylas-booking-form', 'componentDidLoad', this.bookingInfo);
|
|
171
175
|
if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {
|
|
172
176
|
this.name = this.bookingInfo.primaryParticipant?.name;
|
|
173
177
|
this.email = this.bookingInfo.primaryParticipant?.email;
|
|
174
178
|
}
|
|
179
|
+
this.applyThemeConfig(this.themeConfig);
|
|
175
180
|
}
|
|
176
181
|
bookingInfoChangedHandler(newValue) {
|
|
177
182
|
if (newValue && newValue.primaryParticipant) {
|
|
@@ -179,6 +184,13 @@ const NylasBookingForm = class {
|
|
|
179
184
|
this.email = newValue.primaryParticipant.email;
|
|
180
185
|
}
|
|
181
186
|
}
|
|
187
|
+
applyThemeConfig(themeConfig) {
|
|
188
|
+
if (themeConfig) {
|
|
189
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
190
|
+
this.host.style.setProperty(`${key}`, value);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|
|
182
194
|
changeName(name) {
|
|
183
195
|
this.isNameValid = true;
|
|
184
196
|
this.validationError.name = '';
|
|
@@ -239,7 +251,7 @@ const NylasBookingForm = class {
|
|
|
239
251
|
this.updateAdditionalFields(event.detail.name, event.detail.value);
|
|
240
252
|
}
|
|
241
253
|
render() {
|
|
242
|
-
return (index.h(index.Host, { key: '
|
|
254
|
+
return (index.h(index.Host, { key: '9a442ac154e4e8ab9d8e8ec08b2005bb9bda476c' }, index.h("form", { key: '63feaa1eb0688e4019e1af96d48a3e71cafe2d3a', onSubmit: e => this.bookButtonClickedHandler(e), noValidate: true }, index.h("div", { key: '95f92c677613fcddd743467c30e6b097a575fa40', class: "nylas-booking-form", part: "nbf" }, index.h("div", { key: 'b37fc60cddc9172fbb65edaf45e77c3d999f6aa4', class: "input-wrapper", part: "nbf__input-wrapper" }, index.h("input-component", { key: '5545f58ce4fc92b0ab185087dfbeb5de6a25aca0', label: utils.instance.t('name'), name: "name", id: "name", defaultValue: this.bookingInfo?.primaryParticipant?.name || this.name, placeholder: utils.instance.t('namePlaceholder'), type: "text", required: true, requiredError: utils.instance.t('fieldRequired', { field: utils.instance.t('name') }), patternError: utils.instance.t('invalidInputFormat', { field: utils.instance.t('name') }), part: "nbf__input-textfield" })), index.h("div", { key: '6ddd5a68d0966e1fa79998d757a47b2df8c2b6e6', class: "input-wrapper", part: "nbf__input-wrapper" }, index.h("input-component", { key: '20a13472d671c968a2f20c79992a04aca4b50f54', label: utils.instance.t('email'), name: "email", id: "email", pattern: emailRegex, defaultValue: this.bookingInfo?.primaryParticipant?.email || this.email, placeholder: utils.instance.t('emailPlaceholder'), type: "email", required: true, requiredError: utils.instance.t('fieldRequired', { field: utils.instance.t('email') }), patternError: utils.instance.t('invalidInputFormat', { field: utils.instance.t('email') }), part: "nbf__input-textfield" })), this.configSettings?.scheduler?.hide_additional_guests !== true && (index.h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, this.guestEmails.map((email, index$1) => (index.h("div", { class: "input-wrapper button-wrapper" }, index.h("label", { class: {
|
|
243
255
|
error: !!this.guestEmailErrors[index$1],
|
|
244
256
|
} }, utils.instance.t('guestEmail')), index.h("div", { class: "guest-email-input" }, index.h("input", { type: "email", id: `guest-email-${index$1}`, maxLength: 100, class: {
|
|
245
257
|
'guest-email': true,
|
|
@@ -266,7 +278,7 @@ const NylasBookingForm = class {
|
|
|
266
278
|
default:
|
|
267
279
|
return (index.h("div", { class: "input-wrapper", part: "nbf__input-wrapper" }, index.h("input-component", { label: label, name: key, id: key, type: field.type, defaultValue: defaultValue || '', requiredError: utils.instance.t('fieldRequired', { field: label }), required: field.required, part: "nbf__input-textfield" })));
|
|
268
280
|
}
|
|
269
|
-
})), index.h("div", { key: '
|
|
281
|
+
})), index.h("div", { key: '9229b464ad25565982e59b7d01fe5f2204e1d10e', class: "cta" }, index.h("button-component", { key: '877d574a7a39f960c5cddff0f84d3d0454bfc96c', variant: 'basic', class: "back", part: "nbf__button-outline", isLoading: this.backButtonLoading && this.isLoading, onClick: this.handleBackButtonClicked }, index.h("slot", { key: '9436fe8276b9da6baa608695b1d0dceb03c865ae', name: "booking-form-back-label" }, `${utils.instance.t('backButton')}`)), index.h("button-component", { key: '48814874005b24b2f21a8cdbd863194a563f171f', variant: 'primary', isLoading: !this.backButtonLoading && this.isLoading, disabled: this.isLoading, part: "nbf__button-primary", type: "submit" }, index.h("slot", { key: '975aba7f10d24850113f7fcfe1e11abbb15ac401', name: "booking-form-book-label" }, `${utils.instance.t('bookNowButton')}`))))));
|
|
270
282
|
}
|
|
271
283
|
get host() { return index.getElement(this); }
|
|
272
284
|
static get watchers() { return {
|
|
@@ -302,6 +314,7 @@ __decorate([
|
|
|
302
314
|
utils.debug('nylas-booking-form', 'bookingFormError', event.detail);
|
|
303
315
|
},
|
|
304
316
|
},
|
|
317
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
305
318
|
fireRegisterEvent: true,
|
|
306
319
|
}),
|
|
307
320
|
__metadata("design:type", Function),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-booking-form.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,wtIAAwtI;;;;;;;;;;;;;;;;ACWpvI,MAAM,UAAU,GAAG,sIAAsI,CAAC;MAyB7I,gBAAgB;;;;;;;;;QA4J3B,sBAAiB,GAAG,CAAC,UAAkB,EAAE,KAAa;YAEpD,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;YACtC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,MAAM,CAAC,UAAU,CAAC,GAAGA,oBAAY,CAAC,KAAK,CAAC,CAAC;YACzC,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;SAChC,CAAC;QAKF,oBAAe,GAAG,CAAC,UAAkB,EAAE,KAAa;YAClD,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;YAEtC,IAAI,KAAK,KAAK,EAAE,EAAE;gBAChB,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAGC,cAAO,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBAC9F,OAAO;aACR;YACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;gBAC3B,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,GAAGA,cAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBACnG,OAAO;aACR;YACD,IAAI,CAAC,iBAAiB,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;SAC3C,CAAC;QAKF,iCAA4B,GAAG,CAAC;YAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;SAC9C,CAAC;QAKF,kCAA6B,GAAG,CAAC,CAAQ,EAAE,UAAkB;YAC3D,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,oBAAoB,CAAC,UAAU,CAAC,CAAC;YAEtC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;YACrC,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC;YAC7B,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC;SAChC,CAAC;QAKF,4BAAuB,GAAG,CAAC;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;YAC9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;SAC/B,CAAC;QAKF,6BAAwB,GAAG,OAAO,CAAQ;YACxC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,kBAAkB,GAAG,IAAI,CAAC,oBAAoB,CAAC,IAAI,EAAE,CAAC;YAC5D,IAAI,kBAAkB,CAAC,gBAAgB,EAAE;gBACvC,OAAO;aACR;YAEDC,WAAK,CAAC,oBAAoB,EAAE,0BAA0B,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;YAC1E,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,IAAI,CAAC;YACrE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,CAAC;YAExE,IAAI,CAAC,IAAI,IAAI,IAAI,KAAK,EAAE,EAAE;gBACxB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,IAAI,CAAC,eAAe,CAAC,IAAI,GAAGD,cAAO,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,kBAAkB,CAAC;gBAC3G,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBACzB,KAAK,EAAE,oBAAoB;oBAC3B,WAAW,EAAE,kBAAkB;iBAChC,CAAC,CAAC;gBACH,OAAO;aACR;YACD,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,EAAE,EAAE;gBAC1B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,eAAe,CAAC,KAAK,GAAGA,cAAO,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,mBAAmB,CAAC;gBAC9G,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBACzB,KAAK,EAAE,oBAAoB;oBAC3B,WAAW,EAAE,mBAAmB;iBACjC,CAAC,CAAC;gBACH,OAAO;aACR;YACD,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;gBAC3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAC1B,IAAI,CAAC,eAAe,CAAC,KAAK,GAAGA,cAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBAC5F,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;oBACzB,KAAK,EAAE,oBAAoB;oBAC3B,WAAW,EAAEA,cAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,eAAe;iBAC/F,CAAC,CAAC;gBACH,OAAO;aACR;YAED,IAAI,MAAM,GAAuC,EAAE,CAAC;YACpD,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/B,IAAI,QAAQ,GAAG,KAAK,CAAC;gBACrB,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,KAAa,EAAE,CAAS;oBAChD,IAAI,KAAK,KAAK,EAAE,EAAE;wBAChB,QAAQ,GAAG,IAAI,CAAC;wBAChB,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAGA,cAAO,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;qBACtH;yBAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;wBAClC,QAAQ,GAAG,IAAI,CAAC;wBAChB,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,GAAGA,cAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;qBAC3H;iBACF,CAAC,CAAC;gBACH,IAAI,QAAQ,EAAE;oBACZ,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;wBACzB,KAAK,EAAE,oBAAoB;wBAC3B,WAAW,EAAEA,cAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,qBAAqB;qBAC1G,CAAC,CAAC;oBACH,OAAO;iBACR;gBACD,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAa,MAAM,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;aACjG;iBAAM,IAAI,IAAI,CAAC,WAAW,EAAE,MAAM,EAAE;gBACnC,MAAM,GAAG,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC;aACnC;YAED,MAAM,2BAA2B,GAAG,EAAE,CAAC;YACvC,IAAI,IAAI,CAAC,WAAW,EAAE,gBAAgB,EAAE;gBACtC,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,iBAAiB,IAAI,EAAE,CAAC;gBACvF,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC;oBACnE,IAAI,GAAG,IAAI,sBAAsB,EAAE;wBACjC,2BAA2B,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC;qBAC9C;iBACF,CAAC,CAAC;aACJ;YAED,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,kBAAkB,EAAE;oBAClB,IAAI,EAAE,IAAI;oBACV,KAAK,EAAE,KAAK;iBACb;gBACD,MAAM,EAAE,MAAM;gBACd,gBAAgB,EAAE,EAAE,GAAG,2BAA2B,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE;aAC/E,CAAC,CAAC;SACJ,CAAC;QAEF,2BAAsB,GAAG,CAAC,IAAY,EAAE,KAAa;YACnD,IAAI,IAAI,CAAC,gBAAgB,EAAE;gBACzB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;aACrC;SACF,CAAC;;;;;oBA3OsB,EAAE;qBAKD,EAAE;2BAKM,EAAE;gCAKoB,EAAE;2BAKzB,IAAI;4BAKH,IAAI;gCAEgB,EAAE;+BAKK,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;iCAE7C,KAAK;;IAE3C,iBAAiB,MAAK;IAEtB,oBAAoB,MAAK;IAEzB,iBAAiB;QACfC,WAAK,CAAC,oBAAoB,EAAE,mBAAmB,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;QACnE,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE;YAC5D,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,IAAI,CAAC;YACtD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,CAAC;SACzD;KACF;IAGD,yBAAyB,CAAC,QAA+C;QACvE,IAAI,QAAQ,IAAI,QAAQ,CAAC,kBAAkB,EAAE;YAC3C,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC,kBAAkB,CAAC,IAAI,CAAC;YAC7C,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,kBAAkB,CAAC,KAAK,CAAC;SAChD;KACF;IAMD,UAAU,CAAC,IAAY;QAErB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,EAAE,CAAC;QAE/B,IAAI,CAAC,IAAI,GAAGC,cAAQ,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC7B;IAMD,WAAW,CAAC,KAAa;QAEvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,EAAE,CAAC;QAEhC,IAAI,CAAC,KAAK,GAAGH,oBAAY,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC/B;IAED,oBAAoB,CAAC,UAAkB;QACrC,MAAM,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC5C,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC;QAC1B,IAAI,CAAC,gBAAgB,GAAG,EAAE,GAAG,MAAM,EAAE,CAAC;KACvC;IAwJD,4BAA4B,CAAC,KAAgG;QAC3H,QAAQ,KAAK,CAAC,MAAM,CAAC,IAAI;YACvB,KAAK,MAAM;gBACT,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACpC,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACrC,MAAM;YACR;gBACE,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;oBACtB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;wBACzB,KAAK,EAAE,oBAAoB;wBAC3B,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;qBAChC,CAAC,CAAC;oBACH,OAAO;iBACR;gBACD,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACnE,MAAM;SACT;KACF;IAGD,0BAA0B,CAAC,KAAkF;QAC3G,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,KAAK,EAAE,oBAAoB;gBAC3B,WAAW,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;aAChC,CAAC,CAAC;YACH,OAAO;SACR;QACD,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACpE;IAGD,oBAAoB,CAAC,KAAqE;QACxF,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACzF;IAGD,sBAAsB,CAAC,KAAqE;QAC1F,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;KACzF;IAGD,mBAAmB,CAAC,KAAgF;QAClG,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACpE;IAGD,8BAA8B,CAAC,KAAkF;QAC/G,IAAI,CAAC,sBAAsB,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;KACpE;IAgCD,MAAM;QACJ,QACEI,QAACC,UAAI,uDACHD,mEAAM,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,UAAU,UAC/DA,kEAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,KAAK,IACxCA,kEAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IAClDA,8EACE,KAAK,EAAEH,cAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EACxB,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,MAAM,EACT,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI,EACrE,WAAW,EAAEA,cAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,EACzC,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,aAAa,EAAEA,cAAO,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EACvE,YAAY,EAAEA,cAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,EAC3E,IAAI,EAAC,sBAAsB,GAC3B,CACE,EACNG,kEAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IAClDA,8EACE,KAAK,EAAEH,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EACzB,IAAI,EAAC,OAAO,EACZ,EAAE,EAAC,OAAO,EACV,OAAO,EAAE,UAAU,EACnB,YAAY,EAAE,IAAI,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK,EACvE,WAAW,EAAEA,cAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC,EAC1C,IAAI,EAAC,OAAO,EACZ,QAAQ,EAAE,IAAI,EACd,aAAa,EAAEA,cAAO,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EACxE,YAAY,EAAEA,cAAO,CAAC,CAAC,CAAC,oBAAoB,EAAE,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAC5E,IAAI,EAAC,sBAAsB,GAC3B,CACE,EACL,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,sBAAsB,KAAK,IAAI,KAC9DG,iBAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IACjD,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,KAAK,EAAEE,OAAK,MACjCF,iBAAK,KAAK,EAAC,8BAA8B,IACvCA,mBACE,KAAK,EAAE;gBACL,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAACE,OAAK,CAAC;aACtC,IAEAL,cAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAClB,EACRG,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,mBACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,eAAeE,OAAK,EAAE,EAC1B,SAAS,EAAE,GAAG,EACd,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAACA,OAAK,CAAC;aACxC,EACD,WAAW,EAAEL,cAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,EAC/C,KAAK,EAAE,KAAK,gBACAK,OAAK,EACjB,IAAI,EAAC,sBAAsB,EAC3B,MAAM,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,eAAe,CAACA,OAAK,EAAG,CAAC,CAAC,MAA2B,EAAE,KAAK,CAAC,EACxF,OAAO,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,iBAAiB,CAACA,OAAK,EAAG,CAAC,CAAC,MAA2B,EAAE,KAAK,CAAC,GACpF,EACTF,8BACE,OAAO,EAAC,OAAO,EACf,OAAO,EAAC,cAAc,EACtB,OAAO,EAAE,CAAC,CAAQ,KAAK,IAAI,CAAC,6BAA6B,CAAC,CAAC,EAAEE,OAAK,CAAC,EACnE,KAAK,EAAE;gBACL,cAAc,EAAE,IAAI;gBACpB,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAACA,OAAK,CAAC;aACxC,IAEDF,2BAAc,CACG,CACf,EACNA,eAAG,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,gBAAgB,CAACE,OAAK,CAAC,CAAK,CACnD,CACP,CAAC,EACFF,8BAAkB,KAAK,EAAC,WAAW,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,mBAAmB,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,4BAA4B,CAAC,CAAC,CAAC,IACjIA,iBAAK,KAAK,EAAC,gBAAgB,IACzBA,6BAAiB,IAAI,EAAC,MAAM,GAAmB,EAC9C,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,GAAG,GAAGH,cAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,EAAE,GAAG,GAAGA,cAAO,CAAC,CAAC,CAAC,UAAU,CAAC,EAAE,CACzF,CACW,CACf,CACP,EACA,MAAM,CAAC,OAAO,EACZ,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,iBAAiB,IAAI,EAAE,EAUzD;cACG,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;aACxC,GAAG,CAAC,CAAC;YACJ,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACnB,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;YAC1B,MAAM,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;YACjB,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,EAAE,gBAAgB,GAAG,GAAG,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC;YAE5E,QAAQ,KAAK,CAAC,IAAI;gBAChB,KAAK,UAAU;oBACb,QACEG,iBAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IAClDA,6BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,GAAG,EACT,EAAE,EAAE,GAAG,EACP,UAAU,EAAE,KAAK,EACjB,qBAAqB,EAAE,YAAY,GAAG,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,SAAS,EAC9F,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EACzE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,WAAW,EAAC,kHAAkH,GAC9H,CACE,EACN;gBACJ,KAAK,UAAU;oBACb,QACEA,iBAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IAClDA,gCAAoB,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,YAAY,KAAK,MAAM,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,yBAAyB,GAAG,CAC/I,EACN;gBACJ,KAAK,cAAc;oBACjB,QACEA,iBAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IAClDA,gCACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,GAAG,EACT,EAAE,EAAE,GAAG,EACP,oBAAoB,EAAE,YAAY,IAAI,KAAK,CAAC,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,EAC9D,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,EACzE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAC,yBAAyB,GAC9B,CACE,EACN;gBACJ,KAAK,iBAAiB;oBACpB,QACEA,iBAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IAClDA,gCAAoB,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,IAAI,EAAC,yBAAyB,GAAG,CACzI,EACN;gBACJ;oBACE,QACEA,iBAAK,KAAK,EAAC,eAAe,EAAC,IAAI,EAAC,oBAAoB,IAClDA,6BACE,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,GAAG,EACT,EAAE,EAAE,GAAG,EACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,YAAY,EAAE,YAAY,IAAI,EAAE,EAChC,aAAa,EAAEH,cAAO,CAAC,CAAC,CAAC,eAAe,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAC3D,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,IAAI,EAAC,sBAAsB,GAC3B,CACE,EACN;aACL;SACF,CAAC,CAEA,EACNG,kEAAK,KAAK,EAAC,KAAK,IACdA,+EAAkB,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,qBAAqB,EAAC,SAAS,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,uBAAuB,IACpKA,mEAAM,IAAI,EAAC,yBAAyB,IAAE,GAAGH,cAAO,CAAC,CAAC,CAAC,YAAY,CAAC,EAAE,CAAQ,CACzD,EACnBG,+EAAkB,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,IAC5JA,mEAAM,IAAI,EAAC,yBAAyB,IAAE,GAAGH,cAAO,CAAC,CAAC,CAAC,eAAe,CAAC,EAAE,CAAQ,CAC5D,CACf,CACD,CACF,EACP;KACH;;;;;;AA/KD;IA9BCM,mCAAiB,CAA2F;QAC3G,IAAI,EAAE,oBAAoB;QAC1B,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,uBAAuB,EAAE,aAAa,CAAC;YACxC,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;SAC/C,CAAC;QACF,YAAY,EAAE;YACZ,iBAAiB,EAAE,OAAO,MAA4B,EAAE,uBAAgD;gBACtG,uBAAuB,CAAC,SAAS,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;aAC/D;YACD,WAAW,EAAE,OAAO,KAA0B,EAAE,uBAAgD;gBAC9F,uBAAuB,CAAC,SAAS,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aACpE;YACD,YAAY,EAAE,OAAO,KAA0B,EAAE,uBAAgD;gBAC/F,uBAAuB,CAAC,SAAS,CAAC,mBAAmB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;aACrE;YACD,gBAAgB,EAAE,OAAO,KAA2D,EAAE,wBAAiD;gBACrIL,WAAK,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC/D;YACD,oBAAoB,EAAE,OAAO,KAAwB,EAAE,wBAAiD;gBACtGA,WAAK,CAAC,oBAAoB,EAAE,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aACnE;YACD,gBAAgB,EAAE,OAAO,KAAyC,EAAE,wBAAiD;gBACnHA,WAAK,CAAC,oBAAoB,EAAE,kBAAkB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC/D;SACF;QACD,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;8CAgLD;;;;;","names":["sanitizeHtml","i18next","debug","sanitize","h","Host","index","RegisterComponent"],"sources":["src/components/scheduler/nylas-booking-form/nylas-booking-form.scss?tag=nylas-booking-form&encapsulation=shadow","src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"sourcesContent":["@import '../../../common/mixins/inputs.scss';\n@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: 100%;\n @include default-css-variables;\n}\n\n.nylas-booking-form {\n width: 100%;\n padding: 1.5rem;\n box-sizing: border-box;\n height: 450px;\n overflow-y: auto;\n height: 100%;\n}\n\nform {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n}\n\nsp-textfield {\n --spectrum-corner-radius-100: var(--nylas-border-radius-2x); // Set guest input radius\n --spectrum-textfield-border-color: var(--nylas-base-300);\n position: relative;\n width: 100%;\n height: 48px;\n margin-bottom: 16px;\n color: var(--nylas-base-500);\n}\n\n.cta {\n width: 100%;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n\n align-items: flex-start;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}\n\n.input-wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 1rem;\n\n input::placeholder {\n color: var(--nylas-base-300);\n }\n\n label,\n input {\n font-family: var(--nylas-font-family);\n font-size: 16px;\n }\n\n .help-text {\n margin: 0;\n color: var(--nylas-error);\n }\n}\n\n.button-wrapper {\n width: 100%;\n align-items: flex-start;\n height: max-content;\n position: relative;\n}\n\n.button-content {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\nsp-infield-button {\n --spectrum-infield-button-background-color: transparent;\n --spectrum-infield-button-background-color-hover: transparent;\n --spectrum-infield-button-background-color-active: transparent;\n --spectrum-infield-button-border-color: transparent;\n --spectrum-infield-button-border-width: 1px;\n --spectrum-infield-button-border-radius: 0;\n color: var(--nylas-base-600);\n background: transparent;\n border: none;\n outline: 1px solid var(--nylas-base-300);\n border-radius: 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;\n height: 52px;\n width: 52px;\n display: flex;\n position: absolute;\n right: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n sp-icon-cross300 {\n color: var(--nylas-base-600);\n }\n\n &.error {\n border-width: 2px;\n border-color: var(--nylas-error);\n }\n}\n\ninput[type='text'],\ninput[type='email'] {\n @include textfield;\n\n &.guest-email {\n color: var(--nylas-base-900);\n padding-right: 52px; // Infield button width\n }\n}\n\nlabel {\n @include input-label;\n}\n\nbutton-component.remove-guest {\n position: absolute;\n height: 51px;\n right: 0;\n\n &.error {\n button {\n border-color: var(--nylas-error);\n }\n }\n\n button {\n height: inherit;\n border-top-left-radius: initial;\n border-bottom-left-radius: initial;\n border: none !important;\n border-left: 1px solid var(--nylas-base-300) !important;\n\n &:hover,\n &:focus {\n outline: 1px solid var(--nylas-primary) !important;\n color: var(--nylas-primary);\n }\n }\n}\n\nbutton-component.back {\n button {\n --dot-color: var(--nylas-base-800);\n }\n}\n\n.guest-email-input {\n position: relative;\n display: flex;\n width: 100%;\n}\n","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '@/connector/nylas-scheduler-connector';\nimport type { ConfigSettings } from '@/stores/scheduler-store';\nimport type { NylasSchedulerBookingDataWithFlatFields, NylasSchedulerBookingData, NylasEvent } from '@/common/types';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, sanitize } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\nimport i18next from '@/utils/i18n';\n\nconst emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\n\n/**\n * The `nylas-booking-form` component is a UI component that allows users to book an event.\n *\n * The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button.\n * @part nbf__button-outline - The outline button.\n * @part nbf__button-primary - The primary button.\n * @part nbf__input-wrapper - The input wrapper.\n * @part nbf__checkbox-component - The checkbox component.\n * @part nbf__radio-button-group - The radio button group.\n * @part nbf__textarea-component - The textarea component.\n * @part nbf__dropdown - The dropdown component.\n * @part nbf__dropdown-button - The dropdown button.\n * @part nbf__dropdown-content - The dropdown content.\n *\n */\n@Component({\n tag: 'nylas-booking-form',\n styleUrl: 'nylas-booking-form.scss',\n shadow: true,\n})\nexport class NylasBookingForm {\n /**\n * The host element\n */\n @Element() readonly host!: HTMLElement;\n\n /**\n * @standalone\n * The loading state.\n */\n @Prop() readonly isLoading?: boolean;\n\n /**\n * @standalone\n * The booking info.\n */\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /**\n * @standalone\n * The booked event (Used to track if a booking is created in an eventOverride).\n */\n @Prop() readonly eventInfo?: NylasEvent;\n\n /**\n * @standalone\n * The config settings for the scheduler.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * This event is fired when the name is changed.\n */\n @Event() nameChanged!: EventEmitter<string>;\n\n /**\n * This event is fired when the email is changed.\n */\n @Event() emailChanged!: EventEmitter<string>;\n\n /**\n * This event is fired when the cancel button is clicked.\n */\n @Event() backButtonClicked!: EventEmitter<boolean>;\n\n /**\n * This event is fired when the book button is clicked and the form validation is complete and successful.\n * This event is fired before the booking request is sent.\n */\n @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingDataWithFlatFields>;\n\n /**\n * This event is fired when an error occurs in the booking form validation.\n */\n @Event() bookingFormError!: EventEmitter<Partial<Notification>>;\n\n /**\n * This event is fired immediately after the book button is clicked.\n * The booking form validation is not complete at this point.\n */\n @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n /**\n * The name of the user.\n */\n @State() name: string = '';\n\n /**\n * The email address of the user.\n */\n @State() email: string = '';\n\n /**\n * The guests of the user.\n */\n @State() guestEmails: string[] = [];\n\n /**\n * Guest email input errors.\n */\n @State() guestEmailErrors: { [key: number]: string } = {};\n\n /**\n * State to check if name is valid.\n */\n @State() isNameValid: boolean = true;\n\n /**\n * State to check if email is valid.\n */\n @State() isEmailValid: boolean = true;\n\n @State() additionalFields?: Record<string, string> = {};\n\n /**\n * Error message state.\n */\n @State() validationError: { name: string; email: string } = { name: '', email: '' };\n\n @State() backButtonLoading: boolean = false;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {\n debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {\n this.name = this.bookingInfo.primaryParticipant?.name;\n this.email = this.bookingInfo.primaryParticipant?.email;\n }\n }\n\n @Watch('bookingInfo')\n bookingInfoChangedHandler(newValue: NylasSchedulerBookingData | undefined) {\n if (newValue && newValue.primaryParticipant) {\n this.name = newValue.primaryParticipant.name;\n this.email = newValue.primaryParticipant.email;\n }\n }\n\n /**\n * Change the name.\n * @param name The name to select.\n */\n changeName(name: string) {\n // Reset the validation error\n this.isNameValid = true;\n this.validationError.name = '';\n\n this.name = sanitize(name);\n this.nameChanged.emit(name);\n }\n\n /**\n * Change the email.\n * @param email The email to select.\n */\n changeEmail(email: string) {\n // Reset the validation error\n this.isEmailValid = true;\n this.validationError.email = '';\n\n this.email = sanitizeHtml(email);\n this.emailChanged.emit(email);\n }\n\n resetGuestEmailError(guestIndex: number) {\n const errors = { ...this.guestEmailErrors };\n delete errors[guestIndex];\n this.guestEmailErrors = { ...errors };\n }\n\n /**\n * Handle guest emails changed.\n */\n handleGuestChange = (guestIndex: number, email: string) => {\n // Reset the validation error\n this.resetGuestEmailError(guestIndex);\n const guests = [...this.guestEmails];\n guests[guestIndex] = sanitizeHtml(email);\n this.guestEmails = [...guests];\n };\n\n /**\n * Handle guest input blur.\n */\n handleGuestBlur = (guestIndex: number, email: string) => {\n this.resetGuestEmailError(guestIndex);\n\n if (email === '') {\n this.guestEmailErrors[guestIndex] = i18next.t('fieldRequired', { field: i18next.t('email') });\n return;\n }\n if (!emailRegex.test(email)) {\n this.guestEmailErrors[guestIndex] = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n return;\n }\n this.handleGuestChange(guestIndex, email);\n };\n\n /**\n * Handle add guest button clicked.\n */\n addGuestButtonClickedHandler = e => {\n e.preventDefault();\n this.guestEmails = [...this.guestEmails, ''];\n };\n\n /**\n * Handle remove guest button clicked.\n */\n removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n e.preventDefault();\n this.resetGuestEmailError(guestIndex);\n\n const guests = [...this.guestEmails];\n guests.splice(guestIndex, 1);\n this.guestEmails = [...guests];\n };\n\n /**\n * Handle back button clicked.\n */\n handleBackButtonClicked = e => {\n e.preventDefault();\n this.backButtonLoading = true;\n this.backButtonClicked.emit();\n };\n\n /**\n * Handle book button clicked.\n */\n bookButtonClickedHandler = async (e: Event) => {\n e.preventDefault();\n const formSubmittedEvent = this.bookingFormSubmitted.emit();\n if (formSubmittedEvent.defaultPrevented) {\n return;\n }\n\n debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);\n const name = this.name || this.bookingInfo?.primaryParticipant?.name;\n const email = this.email || this.bookingInfo?.primaryParticipant?.email;\n\n if (!name || name === '') {\n this.isNameValid = false;\n this.validationError.name = i18next.t('fieldRequired', { field: i18next.t('name') }) || 'Name is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Name is required',\n });\n return;\n }\n if (!email || email === '') {\n this.isEmailValid = false;\n this.validationError.email = i18next.t('fieldRequired', { field: i18next.t('email') }) || 'Email is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Email is required',\n });\n return;\n }\n if (!emailRegex.test(email)) {\n this.isEmailValid = false;\n this.validationError.email = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: i18next.t('invalidInputFormat', { field: i18next.t('email') }) || 'Invalid email',\n });\n return;\n }\n\n let guests: NylasSchedulerBookingParticipant[] = [];\n if (this.guestEmails.length > 0) {\n let hasError = false;\n this.guestEmails.forEach((email: string, i: number) => {\n if (email === '') {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('fieldRequired', { field: i18next.t('email') }) };\n } else if (!emailRegex.test(email)) {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('invalidInputFormat', { field: i18next.t('email') }) };\n }\n });\n if (hasError) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: i18next.t('invalidInputFormat', { field: i18next.t('guestEmail') }) || 'Invalid guest email',\n });\n return;\n }\n guests = this.guestEmails.map((email: string) => ({ name: email.trim(), email: email.trim() }));\n } else if (this.bookingInfo?.guests) {\n guests = this.bookingInfo?.guests;\n }\n\n const bookingInfoAdditionalFields = {};\n if (this.bookingInfo?.additionalFields) {\n const configAdditionalFields = this.configSettings?.scheduler?.additional_fields || {};\n Object.entries(this.bookingInfo.additionalFields).forEach(([key, obj]) => {\n if (key in configAdditionalFields) {\n bookingInfoAdditionalFields[key] = obj.value;\n }\n });\n }\n\n this.detailsConfirmed.emit({\n primaryParticipant: {\n name: name,\n email: email,\n },\n guests: guests,\n additionalFields: { ...bookingInfoAdditionalFields, ...this.additionalFields },\n });\n };\n\n updateAdditionalFields = (name: string, value: string) => {\n if (this.additionalFields) {\n this.additionalFields[name] = value;\n }\n };\n\n @Listen('nylasFormInputChanged')\n nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string; error: string; label: string; type?: string }>) {\n switch (event.detail.name) {\n case 'name':\n this.changeName(event.detail.value);\n break;\n case 'email':\n this.changeEmail(event.detail.value);\n break;\n default:\n if (event.detail.error) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: event.detail.error,\n });\n return;\n }\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n break;\n }\n }\n\n @Listen('nylasFormDropdownChanged')\n selectOptionChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n if (event.detail.error) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: event.detail.error,\n });\n return;\n }\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n }\n\n @Listen('nylasFormSwitchToggled')\n switchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n }\n\n @Listen('nylasFormCheckboxToggled')\n checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n }\n\n @Listen('nylasFormRadioChanged')\n radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n }\n\n @Listen('nylasFormDropdownDefaultSelected')\n dropdownDefaultSelectedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n }\n\n @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booking-form',\n stateToProps: new Map([\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.eventInfo', 'eventInfo'],\n ['scheduler.configSettings', 'configSettings'],\n ]),\n eventToProps: {\n backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n },\n nameChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantName(event.detail);\n },\n emailChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);\n },\n detailsConfirmed: async (event: CustomEvent<NylasSchedulerBookingDataWithFlatFields>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booking-form', 'detailsConfirmed', event.detail);\n },\n bookingFormSubmitted: async (event: CustomEvent<void>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booking-form', 'bookingFormSubmitted', event.detail);\n },\n bookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booking-form', 'bookingFormError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <form onSubmit={e => this.bookButtonClickedHandler(e)} noValidate>\n <div class=\"nylas-booking-form\" part=\"nbf\">\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <input-component\n label={i18next.t('name')}\n name=\"name\"\n id=\"name\"\n defaultValue={this.bookingInfo?.primaryParticipant?.name || this.name}\n placeholder={i18next.t('namePlaceholder')}\n type=\"text\"\n required={true}\n requiredError={i18next.t('fieldRequired', { field: i18next.t('name') })}\n patternError={i18next.t('invalidInputFormat', { field: i18next.t('name') })}\n part=\"nbf__input-textfield\"\n />\n </div>\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <input-component\n label={i18next.t('email')}\n name=\"email\"\n id=\"email\"\n pattern={emailRegex}\n defaultValue={this.bookingInfo?.primaryParticipant?.email || this.email}\n placeholder={i18next.t('emailPlaceholder')}\n type=\"email\"\n required={true}\n requiredError={i18next.t('fieldRequired', { field: i18next.t('email') })}\n patternError={i18next.t('invalidInputFormat', { field: i18next.t('email') })}\n part=\"nbf__input-textfield\"\n />\n </div>\n {this.configSettings?.scheduler?.hide_additional_guests !== true && (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n {this.guestEmails.map((email, index) => (\n <div class=\"input-wrapper button-wrapper\">\n <label\n class={{\n error: !!this.guestEmailErrors[index],\n }}\n >\n {i18next.t('guestEmail')}\n </label>\n <div class=\"guest-email-input\">\n <input\n type=\"email\"\n id={`guest-email-${index}`}\n maxLength={100}\n class={{\n 'guest-email': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n placeholder={i18next.t('guestEmailPlaceholder')}\n value={email}\n data-index={index}\n part=\"nbf__input-textfield\"\n onBlur={(e: Event) => this.handleGuestBlur(index, (e.target as HTMLInputElement)?.value)}\n onInput={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n ></input>\n <button-component\n variant=\"basic\"\n tooltip=\"Remove guest\"\n onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}\n class={{\n 'remove-guest': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n >\n <close-icon />\n </button-component>\n </div>\n <p class=\"help-text\">{this.guestEmailErrors[index]}</p>\n </div>\n ))}\n <button-component class=\"add-guest\" variant=\"invisible\" part=\"nbf__button-ghost\" onClick={e => this.addGuestButtonClickedHandler(e)}>\n <div class=\"button-content\">\n <add-circle-icon slot=\"icon\"></add-circle-icon>\n {this.guestEmails.length > 0 ? `${i18next.t('addAnotherGuest')}` : `${i18next.t('addGuest')}`}\n </div>\n </button-component>\n </div>\n )}\n {Object.entries(\n (this.configSettings?.scheduler?.additional_fields || {}) as Record<\n string,\n {\n required: boolean;\n type: 'email' | 'text' | 'phone_number' | 'dropdown' | 'checkbox' | 'radio_button' | 'multi_line_text';\n order: number;\n options?: string[];\n label: string;\n }\n >,\n )\n ?.sort((a, b) => a[1].order - b[1].order)\n .map(x => {\n const field = x[1];\n const label = field.label;\n const key = x[0];\n const defaultValue = this.bookingInfo?.additionalFields?.[key]?.value || '';\n\n switch (field.type) {\n case 'dropdown':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <select-dropdown\n label={label}\n name={key}\n id={key}\n withSearch={false}\n defaultSelectedOption={defaultValue ? { value: defaultValue, label: defaultValue } : undefined}\n options={field.options?.map(option => ({ value: option, label: option }))}\n required={field.required}\n exportparts=\"sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content\"\n />\n </div>\n );\n case 'checkbox':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <checkbox-component label={label} name={key} id={key} checked={defaultValue === 'true'} required={field.required} part=\"nbf__checkbox-component\" />\n </div>\n );\n case 'radio_button':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <radio-button-group\n label={label}\n name={key}\n id={key}\n defaultSelectedValue={defaultValue || field.options?.[0] || ''}\n options={field.options?.map(option => ({ value: option, label: option }))}\n required={field.required}\n part=\"nbf__radio-button-group\"\n />\n </div>\n );\n case 'multi_line_text':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <textarea-component label={label} defaultValue={defaultValue} name={key} id={key} required={field.required} part=\"nbf__textarea-component\" />\n </div>\n );\n default:\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <input-component\n label={label}\n name={key}\n id={key}\n type={field.type}\n defaultValue={defaultValue || ''}\n requiredError={i18next.t('fieldRequired', { field: label })}\n required={field.required}\n part=\"nbf__input-textfield\"\n />\n </div>\n );\n }\n })}\n {/* <slot name=\"custom-booking-form\"></slot> */}\n </div>\n <div class=\"cta\">\n <button-component variant={'basic'} class=\"back\" part=\"nbf__button-outline\" isLoading={this.backButtonLoading && this.isLoading} onClick={this.handleBackButtonClicked}>\n <slot name=\"booking-form-back-label\">{`${i18next.t('backButton')}`}</slot>\n </button-component>\n <button-component variant={'primary'} isLoading={!this.backButtonLoading && this.isLoading} disabled={this.isLoading} part=\"nbf__button-primary\" type=\"submit\">\n <slot name=\"booking-form-book-label\">{`${i18next.t('bookNowButton')}`}</slot>\n </button-component>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nylas-booking-form.entry.cjs.js","mappings":"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","names":["sanitizeHtml","i18next","debug","sanitize","h","Host","index","RegisterComponent"],"sources":["src/components/scheduler/nylas-booking-form/nylas-booking-form.scss?tag=nylas-booking-form&encapsulation=shadow","src/components/scheduler/nylas-booking-form/nylas-booking-form.tsx"],"sourcesContent":["@import '../../../common/mixins/inputs.scss';\n@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n height: 100%;\n}\n\n.nylas-booking-form {\n width: 100%;\n padding: 1.5rem;\n box-sizing: border-box;\n height: 450px;\n overflow-y: auto;\n height: 100%;\n}\n\nform {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: center;\n}\n\nsp-textfield {\n --spectrum-corner-radius-100: var(--nylas-border-radius-2x); // Set guest input radius\n --spectrum-textfield-border-color: var(--nylas-base-300);\n position: relative;\n width: 100%;\n height: 48px;\n margin-bottom: 16px;\n color: var(--nylas-base-500);\n}\n\n.cta {\n width: 100%;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.5rem;\n\n @media #{$mobile} {\n grid-template-columns: 1fr;\n }\n\n align-items: flex-start;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 14px;\n box-sizing: border-box;\n border-top: 1px solid var(--nylas-base-200);\n}\n\n.input-wrapper {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: 4px;\n margin-bottom: 1rem;\n\n input::placeholder {\n color: var(--nylas-base-300);\n }\n\n label,\n input {\n font-family: var(--nylas-font-family);\n font-size: 16px;\n }\n\n .help-text {\n margin: 0;\n color: var(--nylas-error);\n }\n}\n\n.button-wrapper {\n width: 100%;\n align-items: flex-start;\n height: max-content;\n position: relative;\n}\n\n.button-content {\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\nsp-infield-button {\n --spectrum-infield-button-background-color: transparent;\n --spectrum-infield-button-background-color-hover: transparent;\n --spectrum-infield-button-background-color-active: transparent;\n --spectrum-infield-button-border-color: transparent;\n --spectrum-infield-button-border-width: 1px;\n --spectrum-infield-button-border-radius: 0;\n color: var(--nylas-base-600);\n background: transparent;\n border: none;\n outline: 1px solid var(--nylas-base-300);\n border-radius: 0 var(--nylas-border-radius-2x) var(--nylas-border-radius-2x) 0;\n height: 52px;\n width: 52px;\n display: flex;\n position: absolute;\n right: 0;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n sp-icon-cross300 {\n color: var(--nylas-base-600);\n }\n\n &.error {\n border-width: 2px;\n border-color: var(--nylas-error);\n }\n}\n\ninput[type='text'],\ninput[type='email'] {\n @include textfield;\n\n &.guest-email {\n color: var(--nylas-base-900);\n padding-right: 52px; // Infield button width\n }\n}\n\nlabel {\n @include input-label;\n}\n\nbutton-component.remove-guest {\n position: absolute;\n height: 51px;\n right: 0;\n\n &.error {\n button {\n border-color: var(--nylas-error);\n }\n }\n\n button {\n height: inherit;\n border-top-left-radius: initial;\n border-bottom-left-radius: initial;\n border: none !important;\n border-left: 1px solid var(--nylas-base-300) !important;\n\n &:hover,\n &:focus {\n outline: 1px solid var(--nylas-primary) !important;\n color: var(--nylas-primary);\n }\n }\n}\n\nbutton-component.back {\n button {\n --dot-color: var(--nylas-base-800);\n }\n}\n\n.guest-email-input {\n position: relative;\n display: flex;\n width: 100%;\n}","import { Component, Element, Event, EventEmitter, Host, Listen, Prop, State, Watch, h } from '@stencil/core';\nimport { RegisterComponent } from '@/common/register-component';\nimport { NylasSchedulerConnector } from '@/connector/nylas-scheduler-connector';\nimport type { ConfigSettings } from '@/stores/scheduler-store';\nimport type { NylasSchedulerBookingDataWithFlatFields, NylasSchedulerBookingData, NylasEvent } from '@/common/types';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug, sanitize } from '@/utils/utils';\nimport { Notification, NylasSchedulerBookingParticipant, ThemeConfig } from '@nylas/core';\nimport sanitizeHtml from 'sanitize-html';\nimport i18next from '@/utils/i18n';\n\nconst emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;\n\n/**\n * The `nylas-booking-form` component is a UI component that allows users to book an event.\n *\n * The booking form component.\n * @part nbf - The booking form host.\n * @part nbf__input-textfield - The input textfield.\n * @part nbf__button-ghost - The ghost button.\n * @part nbf__button-outline - The outline button.\n * @part nbf__button-primary - The primary button.\n * @part nbf__input-wrapper - The input wrapper.\n * @part nbf__checkbox-component - The checkbox component.\n * @part nbf__radio-button-group - The radio button group.\n * @part nbf__textarea-component - The textarea component.\n * @part nbf__dropdown - The dropdown component.\n * @part nbf__dropdown-button - The dropdown button.\n * @part nbf__dropdown-content - The dropdown content.\n *\n */\n@Component({\n tag: 'nylas-booking-form',\n styleUrl: 'nylas-booking-form.scss',\n shadow: true,\n})\nexport class NylasBookingForm {\n /**\n * The host element\n */\n @Element() readonly host!: HTMLNylasBookingFormElement;\n\n /**\n * @standalone\n * The loading state.\n */\n @Prop() readonly isLoading?: boolean;\n\n /**\n * @standalone\n * The booking info.\n */\n @Prop() readonly bookingInfo?: NylasSchedulerBookingData;\n\n /**\n * @standalone\n * The booked event (Used to track if a booking is created in an eventOverride).\n */\n @Prop() readonly eventInfo?: NylasEvent;\n\n /**\n * @standalone\n * The config settings for the scheduler.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /**\n * This event is fired when the name is changed.\n */\n @Event() nameChanged!: EventEmitter<string>;\n\n /**\n * This event is fired when the email is changed.\n */\n @Event() emailChanged!: EventEmitter<string>;\n\n /**\n * This event is fired when the cancel button is clicked.\n */\n @Event() backButtonClicked!: EventEmitter<boolean>;\n\n /**\n * This event is fired when the book button is clicked and the form validation is complete and successful.\n * This event is fired before the booking request is sent.\n */\n @Event() detailsConfirmed!: EventEmitter<NylasSchedulerBookingDataWithFlatFields>;\n\n /**\n * This event is fired when an error occurs in the booking form validation.\n */\n @Event() bookingFormError!: EventEmitter<Partial<Notification>>;\n\n /**\n * This event is fired immediately after the book button is clicked.\n * The booking form validation is not complete at this point.\n */\n @Event() bookingFormSubmitted!: EventEmitter<void>;\n\n /**\n * The name of the user.\n */\n @State() name: string = '';\n\n /**\n * The email address of the user.\n */\n @State() email: string = '';\n\n /**\n * The guests of the user.\n */\n @State() guestEmails: string[] = [];\n\n /**\n * Guest email input errors.\n */\n @State() guestEmailErrors: { [key: number]: string } = {};\n\n /**\n * State to check if name is valid.\n */\n @State() isNameValid: boolean = true;\n\n /**\n * State to check if email is valid.\n */\n @State() isEmailValid: boolean = true;\n\n @State() additionalFields?: Record<string, string> = {};\n\n /**\n * Error message state.\n */\n @State() validationError: { name: string; email: string } = { name: '', email: '' };\n\n @State() backButtonLoading: boolean = false;\n\n connectedCallback() {}\n\n disconnectedCallback() {}\n\n componentWillLoad() {\n debug('nylas-booking-form', 'componentWillLoad', this.bookingInfo);\n }\n\n componentDidLoad() {\n debug('nylas-booking-form', 'componentDidLoad', this.bookingInfo);\n if (this.bookingInfo && this.bookingInfo?.primaryParticipant) {\n this.name = this.bookingInfo.primaryParticipant?.name;\n this.email = this.bookingInfo.primaryParticipant?.email;\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n @Watch('bookingInfo')\n bookingInfoChangedHandler(newValue: NylasSchedulerBookingData | undefined) {\n if (newValue && newValue.primaryParticipant) {\n this.name = newValue.primaryParticipant.name;\n this.email = newValue.primaryParticipant.email;\n }\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n /**\n * Change the name.\n * @param name The name to select.\n */\n changeName(name: string) {\n // Reset the validation error\n this.isNameValid = true;\n this.validationError.name = '';\n\n this.name = sanitize(name);\n this.nameChanged.emit(name);\n }\n\n /**\n * Change the email.\n * @param email The email to select.\n */\n changeEmail(email: string) {\n // Reset the validation error\n this.isEmailValid = true;\n this.validationError.email = '';\n\n this.email = sanitizeHtml(email);\n this.emailChanged.emit(email);\n }\n\n resetGuestEmailError(guestIndex: number) {\n const errors = { ...this.guestEmailErrors };\n delete errors[guestIndex];\n this.guestEmailErrors = { ...errors };\n }\n\n /**\n * Handle guest emails changed.\n */\n handleGuestChange = (guestIndex: number, email: string) => {\n // Reset the validation error\n this.resetGuestEmailError(guestIndex);\n const guests = [...this.guestEmails];\n guests[guestIndex] = sanitizeHtml(email);\n this.guestEmails = [...guests];\n };\n\n /**\n * Handle guest input blur.\n */\n handleGuestBlur = (guestIndex: number, email: string) => {\n this.resetGuestEmailError(guestIndex);\n\n if (email === '') {\n this.guestEmailErrors[guestIndex] = i18next.t('fieldRequired', { field: i18next.t('email') });\n return;\n }\n if (!emailRegex.test(email)) {\n this.guestEmailErrors[guestIndex] = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n return;\n }\n this.handleGuestChange(guestIndex, email);\n };\n\n /**\n * Handle add guest button clicked.\n */\n addGuestButtonClickedHandler = e => {\n e.preventDefault();\n this.guestEmails = [...this.guestEmails, ''];\n };\n\n /**\n * Handle remove guest button clicked.\n */\n removeGuestButtonClickHandler = (e: Event, guestIndex: number) => {\n e.preventDefault();\n this.resetGuestEmailError(guestIndex);\n\n const guests = [...this.guestEmails];\n guests.splice(guestIndex, 1);\n this.guestEmails = [...guests];\n };\n\n /**\n * Handle back button clicked.\n */\n handleBackButtonClicked = e => {\n e.preventDefault();\n this.backButtonLoading = true;\n this.backButtonClicked.emit();\n };\n\n /**\n * Handle book button clicked.\n */\n bookButtonClickedHandler = async (e: Event) => {\n e.preventDefault();\n const formSubmittedEvent = this.bookingFormSubmitted.emit();\n if (formSubmittedEvent.defaultPrevented) {\n return;\n }\n\n debug('nylas-booking-form', 'bookButtonClickedHandler', this.bookingInfo);\n const name = this.name || this.bookingInfo?.primaryParticipant?.name;\n const email = this.email || this.bookingInfo?.primaryParticipant?.email;\n\n if (!name || name === '') {\n this.isNameValid = false;\n this.validationError.name = i18next.t('fieldRequired', { field: i18next.t('name') }) || 'Name is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Name is required',\n });\n return;\n }\n if (!email || email === '') {\n this.isEmailValid = false;\n this.validationError.email = i18next.t('fieldRequired', { field: i18next.t('email') }) || 'Email is required';\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: 'Email is required',\n });\n return;\n }\n if (!emailRegex.test(email)) {\n this.isEmailValid = false;\n this.validationError.email = i18next.t('invalidInputFormat', { field: i18next.t('email') });\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: i18next.t('invalidInputFormat', { field: i18next.t('email') }) || 'Invalid email',\n });\n return;\n }\n\n let guests: NylasSchedulerBookingParticipant[] = [];\n if (this.guestEmails.length > 0) {\n let hasError = false;\n this.guestEmails.forEach((email: string, i: number) => {\n if (email === '') {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('fieldRequired', { field: i18next.t('email') }) };\n } else if (!emailRegex.test(email)) {\n hasError = true;\n this.guestEmailErrors = { ...this.guestEmailErrors, [i]: i18next.t('invalidInputFormat', { field: i18next.t('email') }) };\n }\n });\n if (hasError) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: i18next.t('invalidInputFormat', { field: i18next.t('guestEmail') }) || 'Invalid guest email',\n });\n return;\n }\n guests = this.guestEmails.map((email: string) => ({ name: email.trim(), email: email.trim() }));\n } else if (this.bookingInfo?.guests) {\n guests = this.bookingInfo?.guests;\n }\n\n const bookingInfoAdditionalFields = {};\n if (this.bookingInfo?.additionalFields) {\n const configAdditionalFields = this.configSettings?.scheduler?.additional_fields || {};\n Object.entries(this.bookingInfo.additionalFields).forEach(([key, obj]) => {\n if (key in configAdditionalFields) {\n bookingInfoAdditionalFields[key] = obj.value;\n }\n });\n }\n\n this.detailsConfirmed.emit({\n primaryParticipant: {\n name: name,\n email: email,\n },\n guests: guests,\n additionalFields: { ...bookingInfoAdditionalFields, ...this.additionalFields },\n });\n };\n\n updateAdditionalFields = (name: string, value: string) => {\n if (this.additionalFields) {\n this.additionalFields[name] = value;\n }\n };\n\n @Listen('nylasFormInputChanged')\n nylasFormInputChangedHandler(event: CustomEvent<{ value: string; name: string; error: string; label: string; type?: string }>) {\n switch (event.detail.name) {\n case 'name':\n this.changeName(event.detail.value);\n break;\n case 'email':\n this.changeEmail(event.detail.value);\n break;\n default:\n if (event.detail.error) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: event.detail.error,\n });\n return;\n }\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n break;\n }\n }\n\n @Listen('nylasFormDropdownChanged')\n selectOptionChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n if (event.detail.error) {\n this.bookingFormError.emit({\n title: 'Booking form error',\n description: event.detail.error,\n });\n return;\n }\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n }\n\n @Listen('nylasFormSwitchToggled')\n switchToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n }\n\n @Listen('nylasFormCheckboxToggled')\n checkboxToggledHandler(event: CustomEvent<{ checked: boolean; name: string; label: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.checked ? 'true' : 'false');\n }\n\n @Listen('nylasFormRadioChanged')\n radioChangedHandler(event: CustomEvent<{ value: string; name: string; label: string; type: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n }\n\n @Listen('nylasFormDropdownDefaultSelected')\n dropdownDefaultSelectedHandler(event: CustomEvent<{ value: string; name: string; label: string; error?: string }>) {\n this.updateAdditionalFields(event.detail.name, event.detail.value);\n }\n\n @RegisterComponent<NylasBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-booking-form',\n stateToProps: new Map([\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.bookingInfo', 'bookingInfo'],\n ['scheduler.eventInfo', 'eventInfo'],\n ['scheduler.configSettings', 'configSettings'],\n ]),\n eventToProps: {\n backButtonClicked: async (_event: CustomEvent<boolean>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.toggleAdditionalData(false);\n },\n nameChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantName(event.detail);\n },\n emailChanged: async (event: CustomEvent<string>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n nylasSchedulerConnector.scheduler.setParticipantEmail(event.detail);\n },\n detailsConfirmed: async (event: CustomEvent<NylasSchedulerBookingDataWithFlatFields>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booking-form', 'detailsConfirmed', event.detail);\n },\n bookingFormSubmitted: async (event: CustomEvent<void>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booking-form', 'bookingFormSubmitted', event.detail);\n },\n bookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-booking-form', 'bookingFormError', event.detail);\n },\n },\n localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host>\n <form onSubmit={e => this.bookButtonClickedHandler(e)} noValidate>\n <div class=\"nylas-booking-form\" part=\"nbf\">\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <input-component\n label={i18next.t('name')}\n name=\"name\"\n id=\"name\"\n defaultValue={this.bookingInfo?.primaryParticipant?.name || this.name}\n placeholder={i18next.t('namePlaceholder')}\n type=\"text\"\n required={true}\n requiredError={i18next.t('fieldRequired', { field: i18next.t('name') })}\n patternError={i18next.t('invalidInputFormat', { field: i18next.t('name') })}\n part=\"nbf__input-textfield\"\n />\n </div>\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <input-component\n label={i18next.t('email')}\n name=\"email\"\n id=\"email\"\n pattern={emailRegex}\n defaultValue={this.bookingInfo?.primaryParticipant?.email || this.email}\n placeholder={i18next.t('emailPlaceholder')}\n type=\"email\"\n required={true}\n requiredError={i18next.t('fieldRequired', { field: i18next.t('email') })}\n patternError={i18next.t('invalidInputFormat', { field: i18next.t('email') })}\n part=\"nbf__input-textfield\"\n />\n </div>\n {this.configSettings?.scheduler?.hide_additional_guests !== true && (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n {this.guestEmails.map((email, index) => (\n <div class=\"input-wrapper button-wrapper\">\n <label\n class={{\n error: !!this.guestEmailErrors[index],\n }}\n >\n {i18next.t('guestEmail')}\n </label>\n <div class=\"guest-email-input\">\n <input\n type=\"email\"\n id={`guest-email-${index}`}\n maxLength={100}\n class={{\n 'guest-email': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n placeholder={i18next.t('guestEmailPlaceholder')}\n value={email}\n data-index={index}\n part=\"nbf__input-textfield\"\n onBlur={(e: Event) => this.handleGuestBlur(index, (e.target as HTMLInputElement)?.value)}\n onInput={(e: Event) => this.handleGuestChange(index, (e.target as HTMLInputElement)?.value)}\n ></input>\n <button-component\n variant=\"basic\"\n tooltip=\"Remove guest\"\n onClick={(e: Event) => this.removeGuestButtonClickHandler(e, index)}\n class={{\n 'remove-guest': true,\n 'error': !!this.guestEmailErrors[index],\n }}\n >\n <close-icon />\n </button-component>\n </div>\n <p class=\"help-text\">{this.guestEmailErrors[index]}</p>\n </div>\n ))}\n <button-component class=\"add-guest\" variant=\"invisible\" part=\"nbf__button-ghost\" onClick={e => this.addGuestButtonClickedHandler(e)}>\n <div class=\"button-content\">\n <add-circle-icon slot=\"icon\"></add-circle-icon>\n {this.guestEmails.length > 0 ? `${i18next.t('addAnotherGuest')}` : `${i18next.t('addGuest')}`}\n </div>\n </button-component>\n </div>\n )}\n {Object.entries(\n (this.configSettings?.scheduler?.additional_fields || {}) as Record<\n string,\n {\n required: boolean;\n type: 'email' | 'text' | 'phone_number' | 'dropdown' | 'checkbox' | 'radio_button' | 'multi_line_text';\n order: number;\n options?: string[];\n label: string;\n }\n >,\n )\n ?.sort((a, b) => a[1].order - b[1].order)\n .map(x => {\n const field = x[1];\n const label = field.label;\n const key = x[0];\n const defaultValue = this.bookingInfo?.additionalFields?.[key]?.value || '';\n\n switch (field.type) {\n case 'dropdown':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <select-dropdown\n label={label}\n name={key}\n id={key}\n withSearch={false}\n defaultSelectedOption={defaultValue ? { value: defaultValue, label: defaultValue } : undefined}\n options={field.options?.map(option => ({ value: option, label: option }))}\n required={field.required}\n exportparts=\"sd_dropdown: nbf__dropdown, sd_dropdown-button: nbf__dropdown-button, sd_dropdown-content: nbf__dropdown-content\"\n />\n </div>\n );\n case 'checkbox':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <checkbox-component label={label} name={key} id={key} checked={defaultValue === 'true'} required={field.required} part=\"nbf__checkbox-component\" />\n </div>\n );\n case 'radio_button':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <radio-button-group\n label={label}\n name={key}\n id={key}\n defaultSelectedValue={defaultValue || field.options?.[0] || ''}\n options={field.options?.map(option => ({ value: option, label: option }))}\n required={field.required}\n part=\"nbf__radio-button-group\"\n />\n </div>\n );\n case 'multi_line_text':\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <textarea-component label={label} defaultValue={defaultValue} name={key} id={key} required={field.required} part=\"nbf__textarea-component\" />\n </div>\n );\n default:\n return (\n <div class=\"input-wrapper\" part=\"nbf__input-wrapper\">\n <input-component\n label={label}\n name={key}\n id={key}\n type={field.type}\n defaultValue={defaultValue || ''}\n requiredError={i18next.t('fieldRequired', { field: label })}\n required={field.required}\n part=\"nbf__input-textfield\"\n />\n </div>\n );\n }\n })}\n {/* <slot name=\"custom-booking-form\"></slot> */}\n </div>\n <div class=\"cta\">\n <button-component variant={'basic'} class=\"back\" part=\"nbf__button-outline\" isLoading={this.backButtonLoading && this.isLoading} onClick={this.handleBackButtonClicked}>\n <slot name=\"booking-form-back-label\">{`${i18next.t('backButton')}`}</slot>\n </button-component>\n <button-component variant={'primary'} isLoading={!this.backButtonLoading && this.isLoading} disabled={this.isLoading} part=\"nbf__button-primary\" type=\"submit\">\n <slot name=\"booking-form-book-label\">{`${i18next.t('bookNowButton')}`}</slot>\n </button-component>\n </div>\n </form>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -6,7 +6,7 @@ const index = require('./index-c14ea8f5.js');
|
|
|
6
6
|
const registerComponent = require('./register-component-5bbc6027.js');
|
|
7
7
|
const utils = require('./utils-b430227e.js');
|
|
8
8
|
|
|
9
|
-
const nylasCancelBookingFormCss = ":host{
|
|
9
|
+
const nylasCancelBookingFormCss = ":host{display:block;width:400px;font-family:var(--nylas-font-family)}.nylas-cancel-booking-form{display:flex;align-items:center;flex-direction:column;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;box-shadow:0px 1px 4px rgba(0, 0, 0, 0.1), 0px 3px 6px rgba(0, 0, 0, 0.06)}.nylas-cancel-booking-form form{width:100%}.nylas-cancel-booking-form__title{font-size:18px;font-weight:600;margin-bottom:0;color:var(--nylas-base-900)}.nylas-cancel-booking-form__description{font-size:1rem;font-style:normal;font-weight:400;line-height:140%;color:var(--nylas-base-600);padding-bottom:1.25rem}.nylas-cancel-booking-form__calendar-icon{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)}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}.footer{display:grid;grid-template-columns:1fr 1fr;width:100%;padding-top:1.25rem;gap:1rem;border-top:1px solid var(--nylas-base-200);margin-top:1.25rem}";
|
|
10
10
|
|
|
11
11
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
12
12
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -72,6 +72,7 @@ const NylasCancelBookingForm = class {
|
|
|
72
72
|
this.configSettings = undefined;
|
|
73
73
|
this.eventInfo = undefined;
|
|
74
74
|
this.isLoading = undefined;
|
|
75
|
+
this.themeConfig = undefined;
|
|
75
76
|
this.cancellationReason = '';
|
|
76
77
|
this.cancellationError = '';
|
|
77
78
|
this.cancellationPolicy = this.configSettings?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';
|
|
@@ -90,10 +91,18 @@ const NylasCancelBookingForm = class {
|
|
|
90
91
|
if (!this.cancelBookingId) {
|
|
91
92
|
console.warn(`[nylas-cancel-booking-form] No booking ID provided, "cancelBookingId" prop is required.`);
|
|
92
93
|
}
|
|
94
|
+
this.applyThemeConfig(this.themeConfig);
|
|
93
95
|
}
|
|
94
96
|
disconnectedCallback() {
|
|
95
97
|
utils.debug(`[nylas-cancel-booking-form] Component disconnected`);
|
|
96
98
|
}
|
|
99
|
+
applyThemeConfig(themeConfig) {
|
|
100
|
+
if (themeConfig) {
|
|
101
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
102
|
+
this.host.style.setProperty(`${key}`, value);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
}
|
|
97
106
|
handleNylasFormInputChanged(event) {
|
|
98
107
|
this.triggerValidation.emit({});
|
|
99
108
|
if (event.detail.name === 'cancel-reason') {
|
|
@@ -102,8 +111,9 @@ const NylasCancelBookingForm = class {
|
|
|
102
111
|
}
|
|
103
112
|
}
|
|
104
113
|
render() {
|
|
105
|
-
return (index.h(index.Host, { key: '
|
|
114
|
+
return (index.h(index.Host, { key: '4e09c3c77a5a4a5138366431c50db2731ce08921', part: "ncbf" }, index.h("div", { key: '3cc3f35b457f947d6f368b7857d6529e640800e4', class: "nylas-cancel-booking-form", part: "ncbf__card" }, index.h("div", { key: '41001fcfa02096c97a909c1a2172349d5c77ceba', class: "nylas-cancel-booking-form__calendar-icon", part: "ncbf__icon" }, index.h("calendar-cancel-icon", { key: '328274c7fe7351574cb43565b4ee1d8500d0cdcf' })), index.h("h3", { key: '4a702b5a6b7712336370b82f993a5c36655a4de2', class: "nylas-cancel-booking-form__title", part: "ncbf__title" }, utils.instance.t('cancelBookingTitle')), index.h("div", { key: '3d28b48ce8f84a843cfd96b57340d624e7cc0efc', class: "nylas-cancel-booking-form__description", part: "ncbf__description" }, !this.configSettings?.scheduler?.cancellation_policy ? `${utils.instance.t('cancelBookingMessage')}` : this.cancellationPolicy), index.h("form", { key: 'd1363507571afe0b46f47697830ca603dd206abe', onSubmit: this.handleSubmitCancelBooking }, index.h("textarea-component", { key: '4256de3a9d7b2cf05a45388c9916f9bc38e82b80', id: "cancel-reason", name: "cancel-reason", required: true, label: utils.instance.t('reasonForCancellation'), class: this.cancellationError ? 'error' : '', part: "ncbf__reason-textarea", defaultValue: this.cancellationReason }), index.h("div", { key: 'fc0169e6090700c9ac26db55b6b10f8614bf408e', class: "footer" }, index.h("button-component", { key: 'e348ccaabd354669178d4c5def1ac9c545b8b5ac', variant: 'destructive', class: "cancel", type: "submit", part: "ncbf__button-cta", disabled: this.isLoading }, utils.instance.t('cancelBookingButton')), !!this.eventInfo && (index.h("button-component", { variant: 'basic', class: "back", part: "ncbf__button-outline", onClick: this.handleGoBackClicked }, utils.instance.t('goBackButton'))))))));
|
|
106
115
|
}
|
|
116
|
+
get host() { return index.getElement(this); }
|
|
107
117
|
static get watchers() { return {
|
|
108
118
|
"configSettings": ["configSettingsChangedHandler"]
|
|
109
119
|
}; }
|
|
@@ -150,6 +160,7 @@ __decorate([
|
|
|
150
160
|
utils.debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);
|
|
151
161
|
},
|
|
152
162
|
},
|
|
163
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
153
164
|
fireRegisterEvent: true,
|
|
154
165
|
}),
|
|
155
166
|
__metadata("design:type", Function),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-cancel-booking-form.entry.cjs.js","mappings":"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","names":["i18next","debug","h","Host","RegisterComponent"],"sources":["src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.scss?tag=nylas-cancel-booking-form&encapsulation=shadow","src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n @include default-css-variables;\n display: block;\n width: 400px;\n font-family: var(--nylas-font-family);\n}\n\n.nylas-cancel-booking-form {\n form {\n width: 100%;\n }\n\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1.5rem;\n position: relative;\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.nylas-cancel-booking-form__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 0;\n color: var(--nylas-base-900);\n}\n\n.nylas-cancel-booking-form__description {\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 140%;\n color: var(--nylas-base-600);\n padding-bottom: 1.25rem;\n}\n\n.nylas-cancel-booking-form__calendar-icon {\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}\n\ncalendar-cancel-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.footer {\n display: grid;\n grid-template-columns: 1fr 1fr;\n width: 100%;\n padding-top: 1.25rem;\n gap: 1rem;\n border-top: 1px solid var(--nylas-base-200);\n margin-top: 1.25rem;\n}\n","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse, Timeslot } from '@nylas/core';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { NylasEvent } from '@/common/types';\n\n/**\n * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request).\n * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided.\n *\n * @part ncbf - The cancel booking form container.\n * @part ncbf__icon - The calendar icon.\n * @part ncbf__title - The title of the cancel booking form.\n * @part ncbf__description - The description of the cancel booking form.\n * @part ncbf__reason-textarea - The reason textarea.\n * @part ncbf__button-cta - The cancel booking form CTA button.\n * @part ncbf__button-outline - The cancel booking form outline button.\n * @part ncbf__card - The cancel booking form card.\n */\n@Component({\n tag: 'nylas-cancel-booking-form',\n styleUrl: 'nylas-cancel-booking-form.scss',\n shadow: true,\n})\nexport class NylasCancelBookingForm {\n /**\n * The booking ID to cancel.\n */\n @Prop() readonly cancelBookingId?: string;\n\n /**\n * The booking ID to reject.\n */\n @Prop() readonly rejectBookingId?: string;\n\n /**\n * The selected timeslot.\n */\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /**\n * @standalone\n * The config settings.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The event info.\n */\n @Prop() readonly eventInfo?: NylasEvent;\n\n /**\n * @standalone\n * The loading state.\n */\n @Prop() readonly isLoading?: boolean;\n\n /**\n * This event is fired when the Go back button is clicked on the cancel booking form.\n */\n @Event() readonly goBackButtonClicked!: EventEmitter<void>;\n\n /**\n * This event is fired when the cancel booking form is submitted.\n */\n @Event() readonly cancelBookingFormSubmitted!: EventEmitter<{\n bookingId: string;\n action: 'reject' | 'cancel';\n reason: string;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /**\n * This event is only for triggering the validation on the text area for cancellation reason. This is for internal purposes only.\n */\n @Event() readonly triggerValidation!: EventEmitter<{}>;\n /**\n * This event is fired when an error occurs while cancelling the booking.\n */\n @Event() readonly cancelBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /**\n * This event is fired when an error occurs in the booking form.\n */\n @Event() cancelBookingFormError!: EventEmitter<Partial<Notification>>;\n\n /**\n * The reason for cancellation.\n */\n @State() cancellationReason: string = '';\n\n @State() cancellationError: string = '';\n\n @State() cancellationPolicy: string = this.configSettings?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';\n\n @Watch('configSettings')\n configSettingsChangedHandler(newValue: ConfigSettings) {\n this.cancellationPolicy = newValue?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';\n }\n\n connectedCallback() {\n debug(`[nylas-cancel-booking-form] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancel-booking-form] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancel-booking-form] Component did load`);\n if (!this.cancelBookingId) {\n console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n }\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancel-booking-form] Component disconnected`);\n }\n\n private handleGoBackClicked = () => {\n this.goBackButtonClicked.emit();\n };\n\n private handleSubmitCancelBooking = (event: Event) => {\n this.triggerValidation.emit({});\n event.preventDefault();\n if (!this.cancellationReason) {\n this.cancellationError = i18next.t('cancellationErrorMessage');\n this.cancelBookingFormError.emit({ title: i18next.t('cancelBokingFormError'), description: i18next.t('cancellationErrorMessage') });\n return;\n }\n\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n if (this.selectedTimeslot && minCancellationNotice) {\n const startTime = new Date(this.selectedTimeslot?.start_time);\n const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventError.emit({\n error: {\n title: i18next.t('cancellationErrorTitle'),\n message: i18next.t('minimumCancellationNoticeErrorMessage', { minCancellationNotice }),\n },\n });\n return;\n }\n }\n\n debug(`[nylas-cancel-booking-form] Cancel booking form submitted with reason: ${this.cancellationReason}`);\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.cancelBookedEventError.emit(error);\n };\n if (this.cancelBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, action: 'cancel', reason: this.cancellationReason, errorHandler });\n } else if (this.rejectBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.rejectBookingId, action: 'reject', reason: this.cancellationReason, errorHandler });\n }\n };\n\n @Listen('nylasFormInputChanged')\n handleNylasFormInputChanged(event: CustomEvent<{ value: string; name: string; error: string; label: string; type: string }>) {\n this.triggerValidation.emit({});\n if (event.detail.name === 'cancel-reason') {\n this.cancellationReason = event.detail.value;\n this.cancellationError = event.detail.error;\n }\n }\n\n @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancel-booking-form',\n stateToProps: new Map([\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.eventInfo', 'eventInfo'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.cancelBookingId', 'cancelBookingId'],\n ['scheduler.rejectBookingId', 'rejectBookingId'],\n ]),\n eventToProps: {\n cancelBookingFormSubmitted: async (\n event: CustomEvent<{ bookingId: string; action: 'reject' | 'cancel'; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { action, errorHandler } = event.detail;\n if (action === 'cancel') {\n const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId, event.detail.reason);\n if (errorHandler && (!result || 'error' in result)) {\n errorHandler(result);\n }\n } else if (action === 'reject') {\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'cancelled',\n reason: event.detail.reason,\n });\n if (errorHandler && (!result || 'error' in result)) {\n errorHandler(result);\n }\n }\n },\n goBackButtonClicked: async (event: CustomEvent<void>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'goBackButtonClicked', event.detail);\n nylasSchedulerConnector.scheduler.goBack();\n },\n cancelBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookedEventError', event.detail);\n },\n cancelBookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);\n },\n },\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncbf\">\n <div class=\"nylas-cancel-booking-form\" part=\"ncbf__card\">\n <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncbf__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncbf__title\">\n {i18next.t('cancelBookingTitle')}\n </h3>\n <div class=\"nylas-cancel-booking-form__description\" part=\"ncbf__description\">\n {!this.configSettings?.scheduler?.cancellation_policy ? `${i18next.t('cancelBookingMessage')}` : this.cancellationPolicy}\n </div>\n <form onSubmit={this.handleSubmitCancelBooking}>\n <textarea-component\n id=\"cancel-reason\"\n name=\"cancel-reason\"\n required={true}\n label={i18next.t('reasonForCancellation')}\n class={this.cancellationError ? 'error' : ''}\n part=\"ncbf__reason-textarea\"\n defaultValue={this.cancellationReason}\n ></textarea-component>\n <div class=\"footer\">\n <button-component variant={'destructive'} class=\"cancel\" type=\"submit\" part=\"ncbf__button-cta\" disabled={this.isLoading}>\n {i18next.t('cancelBookingButton')}\n </button-component>\n {!!this.eventInfo && (\n <button-component variant={'basic'} class=\"back\" part=\"ncbf__button-outline\" onClick={this.handleGoBackClicked}>\n {i18next.t('goBackButton')}\n </button-component>\n )}\n </div>\n </form>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"nylas-cancel-booking-form.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,yBAAyB,GAAG,ynCAAynC;;;;;;;;;;;;;;;;MC4B9oC,sBAAsB;;;;;;;;QAqHzB,wBAAmB,GAAG;YAC5B,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC;SACjC,CAAC;QAEM,8BAAyB,GAAG,CAAC,KAAY;YAC/C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;gBAC5B,IAAI,CAAC,iBAAiB,GAAGA,cAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC;gBAC/D,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,EAAE,WAAW,EAAEA,cAAO,CAAC,CAAC,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC;gBACpI,OAAO;aACR;YAED,MAAM,qBAAqB,GAAG,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAuB,CAAC;YACtF,IAAI,IAAI,CAAC,gBAAgB,IAAI,qBAAqB,EAAE;gBAClD,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;gBAC9D,MAAM,oBAAoB,GAAG,SAAS,CAAC,OAAO,EAAE,GAAG,qBAAqB,GAAG,EAAE,GAAG,IAAI,CAAC;gBAErF,IAAI,oBAAoB,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,EAAE;oBAC/C,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;wBAC/B,KAAK,EAAE;4BACL,KAAK,EAAEA,cAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC;4BAC1C,OAAO,EAAEA,cAAO,CAAC,CAAC,CAAC,uCAAuC,EAAE,EAAE,qBAAqB,EAAE,CAAC;yBACvF;qBACF,CAAC,CAAC;oBACH,OAAO;iBACR;aACF;YAEDC,WAAK,CAAC,0EAA0E,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC;YAC3G,MAAM,YAAY,GAAG,CAAC,KAAkC;gBACtD,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACzC,CAAC;YACF,IAAI,IAAI,CAAC,eAAe,EAAE;gBACxB,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,YAAY,EAAE,CAAC,CAAC;aAC5I;iBAAM,IAAI,IAAI,CAAC,eAAe,EAAE;gBAC/B,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,kBAAkB,EAAE,YAAY,EAAE,CAAC,CAAC;aAC5I;SACF,CAAC;;;;;;;;kCA7EoC,EAAE;iCAEH,EAAE;kCAED,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,mBAAmB,IAAI,wDAAwD;;IAGrJ,4BAA4B,CAAC,QAAwB;QACnD,IAAI,CAAC,kBAAkB,GAAG,QAAQ,EAAE,SAAS,EAAE,mBAAmB,IAAI,wDAAwD,CAAC;KAChI;IAED,iBAAiB;QACfA,WAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,MAAM,iBAAiB;QACrBA,WAAK,CAAC,iDAAiD,CAAC,CAAC;KAC1D;IAED,MAAM,gBAAgB;QACpBA,WAAK,CAAC,gDAAgD,CAAC,CAAC;QACxD,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzB,OAAO,CAAC,IAAI,CAAC,yFAAyF,CAAC,CAAC;SACzG;QACD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACzC;IAED,oBAAoB;QAClBA,WAAK,CAAC,oDAAoD,CAAC,CAAC;KAC7D;IAED,gBAAgB,CAAC,WAAyB;QACxC,IAAI,WAAW,EAAE;YACf,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;gBACtD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;aAC9C;SACF;KACF;IA2CD,2BAA2B,CAAC,KAA+F;QACzH,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,IAAI,KAAK,CAAC,MAAM,CAAC,IAAI,KAAK,eAAe,EAAE;YACzC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YAC7C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;SAC7C;KACF;IAgDD,MAAM;QACJ,QACEC,QAACC,UAAI,qDAAC,IAAI,EAAC,MAAM,IACfD,kEAAK,KAAK,EAAC,2BAA2B,EAAC,IAAI,EAAC,YAAY,IACtDA,kEAAK,KAAK,EAAC,0CAA0C,EAAC,IAAI,EAAC,YAAY,IACrEA,oFAAwB,CACpB,EACNA,iEAAI,KAAK,EAAC,kCAAkC,EAAC,IAAI,EAAC,aAAa,IAC5DF,cAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAC7B,EACLE,kEAAK,KAAK,EAAC,wCAAwC,EAAC,IAAI,EAAC,mBAAmB,IACzE,CAAC,IAAI,CAAC,cAAc,EAAE,SAAS,EAAE,mBAAmB,GAAG,GAAGF,cAAO,CAAC,CAAC,CAAC,sBAAsB,CAAC,EAAE,GAAG,IAAI,CAAC,kBAAkB,CACpH,EACNE,mEAAM,QAAQ,EAAE,IAAI,CAAC,yBAAyB,IAC5CA,iFACE,EAAE,EAAC,eAAe,EAClB,IAAI,EAAC,eAAe,EACpB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAEF,cAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,EACzC,KAAK,EAAE,IAAI,CAAC,iBAAiB,GAAG,OAAO,GAAG,EAAE,EAC5C,IAAI,EAAC,uBAAuB,EAC5B,YAAY,EAAE,IAAI,CAAC,kBAAkB,GACjB,EACtBE,kEAAK,KAAK,EAAC,QAAQ,IACjBA,+EAAkB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,kBAAkB,EAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,IACpHF,cAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAChB,EAClB,CAAC,CAAC,IAAI,CAAC,SAAS,KACfE,8BAAkB,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,sBAAsB,EAAC,OAAO,EAAE,IAAI,CAAC,mBAAmB,IAC3GF,cAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CACT,CACpB,CACG,CACD,CACH,CACD,EACP;KACH;;;;;;AArCD;IA9CCI,mCAAiB,CAAiG;QACjH,IAAI,EAAE,2BAA2B;QACjC,YAAY,EAAE,IAAI,GAAG,CAAC;YACpB,CAAC,0BAA0B,EAAE,gBAAgB,CAAC;YAC9C,CAAC,4BAA4B,EAAE,kBAAkB,CAAC;YAClD,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,qBAAqB,EAAE,WAAW,CAAC;YACpC,CAAC,2BAA2B,EAAE,iBAAiB,CAAC;YAChD,CAAC,2BAA2B,EAAE,iBAAiB,CAAC;SACjD,CAAC;QACF,YAAY,EAAE;YACZ,0BAA0B,EAAE,OAC1B,KAAmJ,EACnJ,uBAAgD;gBAEhD,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC;gBAC9C,IAAI,MAAM,KAAK,QAAQ,EAAE;oBACvB,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;oBAClH,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;wBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;qBACtB;iBACF;qBAAM,IAAI,MAAM,KAAK,QAAQ,EAAE;oBAC9B,MAAM,MAAM,GAAG,MAAM,uBAAuB,CAAC,SAAS,CAAC,aAAa,CAAC;wBACnE,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS;wBACjC,MAAM,EAAE,WAAW;wBACnB,MAAM,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM;qBAC5B,CAAC,CAAC;oBACH,IAAI,YAAY,KAAK,CAAC,MAAM,IAAI,OAAO,IAAI,MAAM,CAAC,EAAE;wBAClD,YAAY,CAAC,MAAM,CAAC,CAAC;qBACtB;iBACF;aACF;YACD,mBAAmB,EAAE,OAAO,KAAwB,EAAE,uBAAgD;gBACpGH,WAAK,CAAC,2BAA2B,EAAE,qBAAqB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;gBACxE,uBAAuB,CAAC,SAAS,CAAC,MAAM,EAAE,CAAC;aAC5C;YACD,sBAAsB,EAAE,OAAO,KAA+C,EAAE,wBAAiD;gBAC/HA,WAAK,CAAC,2BAA2B,EAAE,wBAAwB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC5E;YACD,sBAAsB,EAAE,OAAO,KAAyC,EAAE,wBAAiD;gBACzHA,WAAK,CAAC,2BAA2B,EAAE,wBAAwB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;aAC5E;SACF;QACD,gBAAgB,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC;QAC3D,iBAAiB,EAAE,IAAI;KACxB,CAAC;;;;oDAsCD;;;;;","names":["i18next","debug","h","Host","RegisterComponent"],"sources":["src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.scss?tag=nylas-cancel-booking-form&encapsulation=shadow","src/components/scheduler/nylas-cancel-booking-form/nylas-cancel-booking-form.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n width: 400px;\n font-family: var(--nylas-font-family);\n}\n\n.nylas-cancel-booking-form {\n form {\n width: 100%;\n }\n\n display: flex;\n align-items: center;\n flex-direction: column;\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1.5rem;\n position: relative;\n box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-cancel-booking-form__title {\n font-size: 18px;\n font-weight: 600;\n margin-bottom: 0;\n color: var(--nylas-base-900);\n}\n\n.nylas-cancel-booking-form__description {\n font-size: 1rem;\n font-style: normal;\n font-weight: 400;\n line-height: 140%;\n color: var(--nylas-base-600);\n padding-bottom: 1.25rem;\n}\n\n.nylas-cancel-booking-form__calendar-icon {\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}\n\ncalendar-cancel-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\n.footer {\n display: grid;\n grid-template-columns: 1fr 1fr;\n width: 100%;\n padding-top: 1.25rem;\n gap: 1rem;\n border-top: 1px solid var(--nylas-base-200);\n margin-top: 1.25rem;\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Listen, Prop, State, Watch } from '@stencil/core';\nimport { NylasSchedulerConnector } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { Notification, NylasSchedulerErrorResponse, ThemeConfig, Timeslot } from '@nylas/core';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { NylasEvent } from '@/common/types';\n\n/**\n * The `nylas-cancel-booking-form` component is a UI component that allows users to cancel a booking (DELETE request).\n * This component is also used to reject a booking (PUT request) by the organizer, if the prop `rejectBookingId` is provided.\n *\n * @part ncbf - The cancel booking form container.\n * @part ncbf__icon - The calendar icon.\n * @part ncbf__title - The title of the cancel booking form.\n * @part ncbf__description - The description of the cancel booking form.\n * @part ncbf__reason-textarea - The reason textarea.\n * @part ncbf__button-cta - The cancel booking form CTA button.\n * @part ncbf__button-outline - The cancel booking form outline button.\n * @part ncbf__card - The cancel booking form card.\n */\n@Component({\n tag: 'nylas-cancel-booking-form',\n styleUrl: 'nylas-cancel-booking-form.scss',\n shadow: true,\n})\nexport class NylasCancelBookingForm {\n /**\n * The host element.\n * Used to manage the host element of the provider.\n */\n @Element() private host!: HTMLNylasCancelBookingFormElement;\n\n /**\n * The booking ID to cancel.\n */\n @Prop() readonly cancelBookingId?: string;\n\n /**\n * The booking ID to reject.\n */\n @Prop() readonly rejectBookingId?: string;\n\n /**\n * The selected timeslot.\n */\n @Prop() readonly selectedTimeslot!: Timeslot;\n\n /**\n * @standalone\n * The config settings.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The event info.\n */\n @Prop() readonly eventInfo?: NylasEvent;\n\n /**\n * @standalone\n * The loading state.\n */\n @Prop() readonly isLoading?: boolean;\n\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /**\n * This event is fired when the Go back button is clicked on the cancel booking form.\n */\n @Event() readonly goBackButtonClicked!: EventEmitter<void>;\n\n /**\n * This event is fired when the cancel booking form is submitted.\n */\n @Event() readonly cancelBookingFormSubmitted!: EventEmitter<{\n bookingId: string;\n action: 'reject' | 'cancel';\n reason: string;\n errorHandler?: (error: NylasSchedulerErrorResponse) => void;\n }>;\n\n /**\n * This event is only for triggering the validation on the text area for cancellation reason. This is for internal purposes only.\n */\n @Event() readonly triggerValidation!: EventEmitter<{}>;\n /**\n * This event is fired when an error occurs while cancelling the booking.\n */\n @Event() readonly cancelBookedEventError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n /**\n * This event is fired when an error occurs in the booking form.\n */\n @Event() cancelBookingFormError!: EventEmitter<Partial<Notification>>;\n\n /**\n * The reason for cancellation.\n */\n @State() cancellationReason: string = '';\n\n @State() cancellationError: string = '';\n\n @State() cancellationPolicy: string = this.configSettings?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';\n\n @Watch('configSettings')\n configSettingsChangedHandler(newValue: ConfigSettings) {\n this.cancellationPolicy = newValue?.scheduler?.cancellation_policy || 'Your current timeslot will become available to others.';\n }\n\n connectedCallback() {\n debug(`[nylas-cancel-booking-form] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancel-booking-form] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancel-booking-form] Component did load`);\n if (!this.cancelBookingId) {\n console.warn(`[nylas-cancel-booking-form] No booking ID provided, \"cancelBookingId\" prop is required.`);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancel-booking-form] Component disconnected`);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleGoBackClicked = () => {\n this.goBackButtonClicked.emit();\n };\n\n private handleSubmitCancelBooking = (event: Event) => {\n this.triggerValidation.emit({});\n event.preventDefault();\n if (!this.cancellationReason) {\n this.cancellationError = i18next.t('cancellationErrorMessage');\n this.cancelBookingFormError.emit({ title: i18next.t('cancelBokingFormError'), description: i18next.t('cancellationErrorMessage') });\n return;\n }\n\n const minCancellationNotice = this.configSettings?.scheduler?.min_cancellation_notice;\n if (this.selectedTimeslot && minCancellationNotice) {\n const startTime = new Date(this.selectedTimeslot?.start_time);\n const dateTillCancellation = startTime.getTime() - minCancellationNotice * 60 * 1000;\n\n if (dateTillCancellation < new Date().getTime()) {\n this.cancelBookedEventError.emit({\n error: {\n title: i18next.t('cancellationErrorTitle'),\n message: i18next.t('minimumCancellationNoticeErrorMessage', { minCancellationNotice }),\n },\n });\n return;\n }\n }\n\n debug(`[nylas-cancel-booking-form] Cancel booking form submitted with reason: ${this.cancellationReason}`);\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.cancelBookedEventError.emit(error);\n };\n if (this.cancelBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.cancelBookingId, action: 'cancel', reason: this.cancellationReason, errorHandler });\n } else if (this.rejectBookingId) {\n this.cancelBookingFormSubmitted.emit({ bookingId: this.rejectBookingId, action: 'reject', reason: this.cancellationReason, errorHandler });\n }\n };\n\n @Listen('nylasFormInputChanged')\n handleNylasFormInputChanged(event: CustomEvent<{ value: string; name: string; error: string; label: string; type: string }>) {\n this.triggerValidation.emit({});\n if (event.detail.name === 'cancel-reason') {\n this.cancellationReason = event.detail.value;\n this.cancellationError = event.detail.error;\n }\n }\n\n @RegisterComponent<NylasCancelBookingForm, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancel-booking-form',\n stateToProps: new Map([\n ['scheduler.configSettings', 'configSettings'],\n ['scheduler.selectedTimeslot', 'selectedTimeslot'],\n ['scheduler.eventInfo', 'eventInfo'],\n ['scheduler.isLoading', 'isLoading'],\n ['scheduler.cancelBookingId', 'cancelBookingId'],\n ['scheduler.rejectBookingId', 'rejectBookingId'],\n ]),\n eventToProps: {\n cancelBookingFormSubmitted: async (\n event: CustomEvent<{ bookingId: string; action: 'reject' | 'cancel'; reason: string; errorHandler?: (error: NylasSchedulerErrorResponse) => void }>,\n nylasSchedulerConnector: NylasSchedulerConnector,\n ) => {\n const { action, errorHandler } = event.detail;\n if (action === 'cancel') {\n const result = await nylasSchedulerConnector.scheduler.cancelBooking(event.detail.bookingId, event.detail.reason);\n if (errorHandler && (!result || 'error' in result)) {\n errorHandler(result);\n }\n } else if (action === 'reject') {\n const result = await nylasSchedulerConnector.scheduler.updateBooking({\n bookingId: event.detail.bookingId,\n status: 'cancelled',\n reason: event.detail.reason,\n });\n if (errorHandler && (!result || 'error' in result)) {\n errorHandler(result);\n }\n }\n },\n goBackButtonClicked: async (event: CustomEvent<void>, nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'goBackButtonClicked', event.detail);\n nylasSchedulerConnector.scheduler.goBack();\n },\n cancelBookedEventError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookedEventError', event.detail);\n },\n cancelBookingFormError: async (event: CustomEvent<Partial<Notification>>, _nylasSchedulerConnector: NylasSchedulerConnector) => {\n debug('nylas-cancel-booking-form', 'cancelBookingFormError', event.detail);\n },\n },\n localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncbf\">\n <div class=\"nylas-cancel-booking-form\" part=\"ncbf__card\">\n <div class=\"nylas-cancel-booking-form__calendar-icon\" part=\"ncbf__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancel-booking-form__title\" part=\"ncbf__title\">\n {i18next.t('cancelBookingTitle')}\n </h3>\n <div class=\"nylas-cancel-booking-form__description\" part=\"ncbf__description\">\n {!this.configSettings?.scheduler?.cancellation_policy ? `${i18next.t('cancelBookingMessage')}` : this.cancellationPolicy}\n </div>\n <form onSubmit={this.handleSubmitCancelBooking}>\n <textarea-component\n id=\"cancel-reason\"\n name=\"cancel-reason\"\n required={true}\n label={i18next.t('reasonForCancellation')}\n class={this.cancellationError ? 'error' : ''}\n part=\"ncbf__reason-textarea\"\n defaultValue={this.cancellationReason}\n ></textarea-component>\n <div class=\"footer\">\n <button-component variant={'destructive'} class=\"cancel\" type=\"submit\" part=\"ncbf__button-cta\" disabled={this.isLoading}>\n {i18next.t('cancelBookingButton')}\n </button-component>\n {!!this.eventInfo && (\n <button-component variant={'basic'} class=\"back\" part=\"ncbf__button-outline\" onClick={this.handleGoBackClicked}>\n {i18next.t('goBackButton')}\n </button-component>\n )}\n </div>\n </form>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
@@ -6,7 +6,7 @@ const index = require('./index-c14ea8f5.js');
|
|
|
6
6
|
const registerComponent = require('./register-component-5bbc6027.js');
|
|
7
7
|
const utils = require('./utils-b430227e.js');
|
|
8
8
|
|
|
9
|
-
const nylasCancelledEventCardCss = ":host{display:block
|
|
9
|
+
const nylasCancelledEventCardCss = ":host{display:block}.nylas-cancelled-event-card{height:inherit;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:var(--nylas-font-family);width:400px;background-color:var(--nylas-base-0);color:var(--nylas-base-800);border-radius:var(--nylas-border-radius-2x);padding:1.5rem;position:relative;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){.nylas-cancelled-event-card{width:inherit}}.nylas-cancelled-event-card__title{font-size:18px;font-weight:600;line-height:24px;color:var(--nylas-base-900);text-align:center}.nylas-cancelled-event-description{font-size:16px;font-weight:500;color:var(--nylas-base-600)}.nylas-cancelled-event-card__calendar-icon{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)}.nylas-cancelled-event-card__cta{width:100%;display:flex;flex-direction:row;align-items:flex-start;margin-top:1rem}calendar-cancel-icon{display:flex;align-items:center;justify-content:center;height:100%}button-component{width:100%}";
|
|
10
10
|
|
|
11
11
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
|
12
12
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -36,6 +36,7 @@ const NylasCancelledEventCard = class {
|
|
|
36
36
|
this.closeCancelEventCardClicked.emit({ errorHandler });
|
|
37
37
|
};
|
|
38
38
|
this.configSettings = undefined;
|
|
39
|
+
this.themeConfig = undefined;
|
|
39
40
|
this.cancelledEventInfo = undefined;
|
|
40
41
|
this.isClosing = false;
|
|
41
42
|
}
|
|
@@ -50,13 +51,22 @@ const NylasCancelledEventCard = class {
|
|
|
50
51
|
if (!this.cancelledEventInfo) {
|
|
51
52
|
console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, "cancelledEventInfo" prop is required.`);
|
|
52
53
|
}
|
|
54
|
+
this.applyThemeConfig(this.themeConfig);
|
|
53
55
|
}
|
|
54
56
|
disconnectedCallback() {
|
|
55
57
|
utils.debug(`[nylas-cancelled-event-card] Component disconnected`);
|
|
56
58
|
}
|
|
59
|
+
applyThemeConfig(themeConfig) {
|
|
60
|
+
if (themeConfig) {
|
|
61
|
+
for (const [key, value] of Object.entries(themeConfig)) {
|
|
62
|
+
this.host.style.setProperty(`${key}`, value);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
57
66
|
render() {
|
|
58
|
-
return (index.h(index.Host, { key: '
|
|
67
|
+
return (index.h(index.Host, { key: '4f1f7bf3b9d6376f5112b5f71b33bdce9bf59a19', part: "ncec" }, index.h("div", { key: 'f485f11c84c501c1d56cac844ccc39fe09b758fb', class: "nylas-cancelled-event-card", part: "ncec__card" }, index.h("div", { key: '3ac26f67a660d1075b3d5f674b745db0c59125a2', class: "nylas-cancelled-event-card__calendar-icon", part: "ncec__icon" }, index.h("calendar-cancel-icon", { key: '4dc83661715f1525b3a5a45d69e336d7f0f9dbf1' })), index.h("h3", { key: '59446c3be2e213ca71124be2d33cae8c077b451d', class: "nylas-cancelled-event-card__title", part: "ncec__title" }, utils.instance.t('bookingCancelledTitle'), "!"), index.h("div", { key: '6486085d435d558816573e6d2aa3840030707af2', class: "nylas-cancelled-event-card__description", part: "ncec__description" }, utils.instance.t('bookingCancelledMessage'), " ", this.configSettings?.organizer?.name || 'the participants', "."), index.h("div", { key: 'e7ebffeb313b39f860df4776fe802beddc9eb86b', class: "nylas-cancelled-event-card__cta" }, index.h("button-component", { key: '35593203c58b837db2b7ce98d8cf214658b2e8a0', variant: "basic", disabled: this.isClosing, part: "ncec__button-outline", onClick: this.handleCloseClicked }, this.isClosing ? `${utils.instance.t('closingButton')}...` : `${utils.instance.t('closeButton')}`)))));
|
|
59
68
|
}
|
|
69
|
+
get host() { return index.getElement(this); }
|
|
60
70
|
};
|
|
61
71
|
__decorate([
|
|
62
72
|
registerComponent.RegisterComponent({
|
|
@@ -74,6 +84,7 @@ __decorate([
|
|
|
74
84
|
utils.debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);
|
|
75
85
|
},
|
|
76
86
|
},
|
|
87
|
+
localPropsToProp: new Map([['themeConfig', 'themeConfig']]),
|
|
77
88
|
fireRegisterEvent: true,
|
|
78
89
|
}),
|
|
79
90
|
__metadata("design:type", Function),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"nylas-cancelled-event-card.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,0BAA0B,GAAG,
|
|
1
|
+
{"file":"nylas-cancelled-event-card.entry.cjs.js","mappings":"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","names":["debug","h","Host","i18next","RegisterComponent"],"sources":["src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.scss?tag=nylas-cancelled-event-card&encapsulation=shadow","src/components/scheduler/nylas-cancelled-event-card/nylas-cancelled-event-card.tsx"],"sourcesContent":["@import '../../../common/styles/variables.scss';\n\n:host {\n display: block;\n}\n\n.nylas-cancelled-event-card {\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 width: 400px;\n\n @media #{$mobile} {\n width: inherit;\n }\n\n background-color: var(--nylas-base-0);\n color: var(--nylas-base-800);\n border-radius: var(--nylas-border-radius-2x);\n padding: 1.5rem;\n position: relative;\n box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1),\n 0px 3px 6px rgba(0, 0, 0, 0.06);\n}\n\n.nylas-cancelled-event-card__title {\n font-size: 18px;\n font-weight: 600;\n line-height: 24px;\n color: var(--nylas-base-900);\n text-align: center;\n}\n\n.nylas-cancelled-event-description {\n font-size: 16px;\n font-weight: 500;\n color: var(--nylas-base-600);\n}\n\n.nylas-cancelled-event-card__calendar-icon {\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}\n\n.nylas-cancelled-event-card__cta {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n margin-top: 1rem;\n}\n\ncalendar-cancel-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n}\n\nbutton-component {\n width: 100%;\n}","import { RegisterComponent } from '@/common/register-component';\nimport { Component, Element, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';\nimport { NylasEvent, NylasSchedulerConnector, NylasSchedulerErrorResponse } from '../../..';\nimport { NylasScheduling } from '../nylas-scheduling/nylas-scheduling';\nimport { debug } from '@/utils/utils';\nimport { ConfigSettings } from '@/stores/scheduler-store';\nimport i18next from '@/utils/i18n';\nimport { ThemeConfig } from '@nylas/core';\n\n/**\n * The `nylas-cancelled-event-card` component is a UI component that displays the cancelled event card.\n *\n * @part ncec - The cancelled event card host.\n * @part ncec__icon - The calendar icon.\n * @part ncec__title - The title of the cancelled event card.\n * @part ncec__description - The description of the cancelled event card.\n * @part ncec__button-outline - The close button CTA.\n * @part ncec__card - The cancelled event card.\n */\n@Component({\n tag: 'nylas-cancelled-event-card',\n styleUrl: 'nylas-cancelled-event-card.scss',\n shadow: true,\n})\nexport class NylasCancelledEventCard {\n /**\n * The host element.\n * Used to manage the host element of the provider.\n */\n @Element() private host!: HTMLNylasCancelledEventCardElement;\n\n /**\n * @standalone\n * The config settings for the scheduler.\n */\n @Prop() readonly configSettings?: ConfigSettings;\n\n /**\n * @standalone\n * The theme configuration.\n */\n @Prop({ attribute: 'theme-config' }) readonly themeConfig?: any;\n\n /**\n * The participant's name who booked the event / is logged in.\n */\n @Prop() readonly cancelledEventInfo!: Partial<NylasEvent>;\n\n /**\n * Closing state of the cancelled event card button.\n */\n @State() isClosing: boolean = false;\n\n /**\n * This event is fired when the close button is clicked on the cancelled event card.\n */\n @Event() readonly closeCancelEventCardClicked!: EventEmitter<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>;\n\n /**\n * This event is fired when an error occurs.\n */\n @Event() readonly cancelledEventCardError!: EventEmitter<NylasSchedulerErrorResponse>;\n\n connectedCallback() {\n debug(`[nylas-cancelled-event-card] Component connected`);\n }\n\n async componentWillLoad() {\n debug(`[nylas-cancelled-event-card] Component will load`);\n }\n\n async componentDidLoad() {\n debug(`[nylas-cancelled-event-card] Component did load`);\n if (!this.cancelledEventInfo) {\n console.warn(`[nylas-cancelled-event-card] No cancelled event info provided, \"cancelledEventInfo\" prop is required.`);\n }\n this.applyThemeConfig(this.themeConfig);\n }\n\n disconnectedCallback() {\n debug(`[nylas-cancelled-event-card] Component disconnected`);\n }\n\n applyThemeConfig(themeConfig?: ThemeConfig) {\n if (themeConfig) {\n for (const [key, value] of Object.entries(themeConfig)) {\n this.host.style.setProperty(`${key}`, value);\n }\n }\n }\n\n private handleCloseClicked = () => {\n this.isClosing = true;\n const errorHandler = (error: NylasSchedulerErrorResponse) => {\n this.cancelledEventCardError.emit(error);\n this.isClosing = false;\n };\n this.closeCancelEventCardClicked.emit({ errorHandler });\n };\n\n @RegisterComponent<NylasCancelledEventCard, NylasSchedulerConnector, Exclude<NylasScheduling['stores'], undefined>>({\n name: 'nylas-cancelled-event-card',\n stateToProps: new Map([['scheduler.configSettings', 'configSettings']]),\n eventToProps: {\n closeCancelEventCardClicked: async (_: CustomEvent<{ errorHandler?: (error: NylasSchedulerErrorResponse) => void }>, nylasschedulerconnector: NylasSchedulerConnector) => {\n const result = await nylasschedulerconnector.scheduler.resetCancel();\n\n const { errorHandler } = _.detail;\n if (errorHandler && (!result || 'error' in result)) {\n errorHandler(result);\n }\n },\n cancelledEventCardError: async (event: CustomEvent<NylasSchedulerErrorResponse>, _nylasschedulerconnector: NylasSchedulerConnector) => {\n debug('nylas-cancelled-event-card', 'cancelledEventCardError', event.detail);\n },\n },\n localPropsToProp: new Map([['themeConfig', 'themeConfig']]),\n fireRegisterEvent: true,\n })\n render() {\n return (\n <Host part=\"ncec\">\n <div class=\"nylas-cancelled-event-card\" part=\"ncec__card\">\n <div class=\"nylas-cancelled-event-card__calendar-icon\" part=\"ncec__icon\">\n <calendar-cancel-icon />\n </div>\n <h3 class=\"nylas-cancelled-event-card__title\" part=\"ncec__title\">\n {i18next.t('bookingCancelledTitle')}!\n </h3>\n <div class=\"nylas-cancelled-event-card__description\" part=\"ncec__description\">\n {i18next.t('bookingCancelledMessage')} {this.configSettings?.organizer?.name || 'the participants'}.\n </div>\n <div class=\"nylas-cancelled-event-card__cta\">\n <button-component variant=\"basic\" disabled={this.isClosing} part=\"ncec__button-outline\" onClick={this.handleCloseClicked}>\n {this.isClosing ? `${i18next.t('closingButton')}...` : `${i18next.t('closeButton')}`}\n </button-component>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
|