@sprucelabs/spruce-calendar-components 19.2.0 → 20.1.0

package/build/esm/index-components.d.ts

@@ -15,5 +15,6 @@ export { default as CalendarToolRegistrar } from './toolBelt/CalendarToolRegistr
 export * from './toolBelt/CalendarToolRegistrar';
 export { default as AbstractCalendarEventToolBeltState } from './toolBelt/states/AbstractCalendarEventToolBeltState';
 export * from './toolBelt/states/AbstractCalendarEventToolBeltState';
+export { default as draftEventGenerator } from './utilities/draftGenerator';
 /** TYPES */
 export * from './types/calendar.types';

package/build/esm/index-components.js

@@ -15,5 +15,6 @@ export { default as CalendarToolRegistrar } from './toolBelt/CalendarToolRegistr
 export * from './toolBelt/CalendarToolRegistrar.js';
 export { default as AbstractCalendarEventToolBeltState } from './toolBelt/states/AbstractCalendarEventToolBeltState.js';
 export * from './toolBelt/states/AbstractCalendarEventToolBeltState.js';
+export { default as draftEventGenerator } from './utilities/draftGenerator.js';
 /** TYPES */
 export * from './types/calendar.types.js';

package/build/esm/stores/RemoteEventStore.d.ts

@@ -4,13 +4,13 @@ import { UpdateEvent } from '../types/calendar.types';
 export interface RemoteEventStoreOptions {
     client: MercuryClient;
     calendarId?: string;
-    organizationId: string;
+    locationId: string;
 }
 declare type FullEvent = SpruceSchemas.CalendarUtils.v2021_05_19.CalendarEvent;
 export default class RemoteEventStore {
     private client;
     private calendarId?;
-    private organizationId;
+    private locationId;
     private pendingEvent?;
     private draftIdMap;
     private promises;

package/build/esm/stores/RemoteEventStore.js

@@ -28,10 +28,10 @@ export default class RemoteEventStore {
         this.queueByEventId = {};
         this.busyByEvent = {};
         this.lastSavedById = {};
-        assertOptions(options, ['client', 'organizationId']);
+        assertOptions(options, ['client', 'locationId']);
         this.client = options.client;
         this.calendarId = options.calendarId;
-        this.organizationId = options.organizationId;
+        this.locationId = options.locationId;
     }
     persist(event) {
         return __awaiter(this, void 0, void 0, function* () {
@@ -141,7 +141,7 @@ export default class RemoteEventStore {
         payload = this.cleanPayload(payload);
         return {
             payload,
-            target: Object.assign(Object.assign({}, target), { calendarEventPersonId: personId, organizationId: this.organizationId }),
+            target: Object.assign(Object.assign({}, target), { calendarEventPersonId: personId, locationId: this.locationId }),
         };
     }
     cleanTarget(target) {
@@ -195,7 +195,7 @@ export default class RemoteEventStore {
             else {
                 yield this.client.emitAndFlattenResponses('calendar.delete-calendar-event::v2021_05_19', {
                     target: {
-                        organizationId: this.organizationId,
+                        locationId: this.locationId,
                         calendarEventId: id,
                     },
                 });

package/build/esm/toolBelt/states/AbstractCalendarEventToolBeltState.d.ts

@@ -1,5 +1,6 @@
 import { SpruceSchemas, ToolBeltState, ViewControllerId } from '@sprucelabs/heartwood-view-controllers';
 import { CalendarTool, CalendarToolBeltContext, CalendarToolBeltStateMachine, GetPersonFromEventHandler } from '../../types/calendar.types';
+import EventControlsCardViewController from '../../viewControllers/EventControlsCard.vc';
 declare type Tool = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.ToolBeltTool;
 export declare type AddToolOptions = Omit<Tool, 'card'> & {
     cardVcId: ViewControllerId;
@@ -18,7 +19,7 @@ export default abstract class AbstractCalendarEventToolBeltState implements Tool
     private handleDidUpdateContext;
     private getContext;
     clearPendingContextChanges(): Promise<void>;
-    addTool(options: AddToolOptions): Promise<void>;
+    addTool(options: AddToolOptions): Promise<CalendarTool>;
     private buildVcConstructorOptions;
     private addVc;
     protected getPersonFromEvent(): ReturnType<GetPersonFromEventHandler>;
@@ -26,6 +27,7 @@ export default abstract class AbstractCalendarEventToolBeltState implements Tool
     removeTool(id: string): void;
     getPendingContextChanges(): Partial<CalendarToolBeltContext>;
     getVcForTool(toolId: string): CalendarTool | undefined;
+    getControlsVc(): EventControlsCardViewController;
     destroy(): Promise<void>;
 }
 export {};

package/build/esm/toolBelt/states/AbstractCalendarEventToolBeltState.js

@@ -22,10 +22,7 @@ export default class AbstractCalendarEventToolBeltState {
             this.sm = sm;
             this.toolBeltVc = sm.getToolBeltVc();
             this._isLoaded = true;
-            this.controlsVc = sm.Controller('calendar.event-controls-card', {
-                onCancel: this.clearPendingContextChanges.bind(this),
-                onSave: this.handleClickSave.bind(this),
-            });
+            this.controlsVc = sm.Controller('calendar.event-controls-card', Object.assign(Object.assign({ onCancel: this.clearPendingContextChanges.bind(this), onSave: this.handleClickSave.bind(this) }, this.buildVcConstructorOptions('controls')), { onCancelEvent: this.sm.getContext().cancelEvent }));
             this.toolBeltVc.clearTools();
             this.toolBeltVc.setStickyTool({
                 card: this.controlsVc.render(),
@@ -79,6 +76,7 @@ export default class AbstractCalendarEventToolBeltState {
             const { cardVcId, lineIcon, id } = options;
             const vc = this.sm.Controller(cardVcId, this.buildVcConstructorOptions(id));
             yield this.addVc(id, lineIcon, vc);
+            return vc;
         });
     }
     buildVcConstructorOptions(id) {
@@ -86,6 +84,7 @@ export default class AbstractCalendarEventToolBeltState {
             updateContext: (updates, options) => this.handleUpdateContextFromTool(updates, id, options),
             getContext: () => this.getContext(),
             getPersonFromEvent: () => this.getPersonFromEvent(),
+            getHasPendingContextChanges: () => Object.keys(this.pendingContextUpdates).length > 0,
         };
     }
     addVc(toolId, lineIcon, vc) {
@@ -153,6 +152,9 @@ export default class AbstractCalendarEventToolBeltState {
         var _a;
         return (_a = this.vcs.find((v) => v.toolId === toolId)) === null || _a === void 0 ? void 0 : _a.vc;
     }
+    getControlsVc() {
+        return this.controlsVc;
+    }
     destroy() {
         return __awaiter(this, void 0, void 0, function* () {
             yield this.sm.off('did-update-context', this.handleDidUpdateContext);

package/build/esm/types/calendar.types.d.ts

@@ -18,6 +18,7 @@ declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export declare type CalendarToolBeltContext = SkillViewControllerLoadOptions & {
     event: CalendarEvent;
     calendarVc: CalendarViewController;
+    cancelEvent: CancelEventHandler;
 };
 export declare type CalendarToolBeltStateMachine = ToolBeltStateMachine<CalendarToolBeltContext>;
 export interface RemoteCalendarTool extends CalendarTool {
@@ -34,10 +35,13 @@ export interface UpdateCalendarContextOptions {
 export declare type UpdateCalendarToolBeltContextHandler = (context: Partial<CalendarToolBeltContext>, options?: UpdateCalendarContextOptions) => Promise<void>;
 export declare type GetCalendarToolBeltContextHandler = () => CalendarToolBeltContext;
 export declare type GetPersonFromEventHandler = () => Promise<Person | null>;
+export declare type GetHasPendingContextChangesHandler = () => boolean;
+export declare type CancelEventHandler = (eventId: string) => boolean | Promise<boolean | void> | void;
 export interface CalendarToolOptions {
     updateContext: UpdateCalendarToolBeltContextHandler;
     getContext: GetCalendarToolBeltContextHandler;
     getPersonFromEvent: GetPersonFromEventHandler;
+    getHasPendingContextChanges: GetHasPendingContextChangesHandler;
 }
 export interface EventWithToolBeltState {
     getToolBeltState(): ToolBeltState;

package/build/esm/viewControllers/Calendar.vc.d.ts

@@ -30,6 +30,7 @@ export default class CalendarViewController extends CoreCalendarViewController {
     private eventSwappedHandler?;
     private dropEventHandler?;
     private isSwapping;
+    private lastSwappedId?;
     constructor(options: ViewControllerOptions & CalendarViewControllerOptions);
     private handleDropEvent;
     getCalendarVc(): this;

package/build/esm/viewControllers/Calendar.vc.js

@@ -186,10 +186,15 @@ export default class CalendarViewController extends CoreCalendarViewController {
                 if (!saved) {
                     return;
                 }
-                if (draftEventGenerator.isDraftId(id) &&
-                    !draftEventGenerator.isDraftId(saved.id)) {
-                    yield this.swapEvent(event, saved);
-                    yield ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+                if (id !== saved.id) {
+                    if (this.lastSwappedId === id) {
+                        this.updateEvent(saved.id, saved);
+                    }
+                    else {
+                        this.lastSwappedId = id;
+                        yield this.swapEvent(event, saved);
+                        yield ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+                    }
                 }
                 else {
                     _super.updateEvent.call(this, saved.id, { isBusy, error: undefined });

package/build/esm/viewControllers/EventControlsCard.vc.d.ts

@@ -1,8 +1,9 @@
 import { AbstractViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
-import { CalendarTool } from '../types/calendar.types';
+import { CalendarTool, CalendarToolOptions, CancelEventHandler } from '../types/calendar.types';
 declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
-export interface EventControlsCardOptions {
+export interface EventControlsCardOptions extends CalendarToolOptions {
     onCancel: () => Promise<void | boolean> | void | boolean;
+    onCancelEvent: CancelEventHandler;
     onSave: () => Promise<void | boolean> | void | boolean;
 }
 export default class EventControlsCardViewController extends AbstractViewController<Card> implements CalendarTool {
@@ -10,10 +11,15 @@ export default class EventControlsCardViewController extends AbstractViewControl
     private cardVc;
     private saveHandler;
     private cancelHandler;
+    private getHasPendingContextChangesHandler;
+    private getContext;
+    private cancelEventHandler;
     constructor(options: ViewControllerOptions & EventControlsCardOptions);
+    private CardVc;
     private handleClickCancel;
     private handleClickSave;
     handleUpdateContext(): void;
+    private optionallyDropInCancelButton;
     render(): SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 }
 export {};

package/build/esm/viewControllers/EventControlsCard.vc.js

@@ -9,13 +9,27 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { AbstractViewController, } from '@sprucelabs/heartwood-view-controllers';
 import { assertOptions } from '@sprucelabs/schema';
+import draftEventGenerator from '../utilities/draftGenerator.js';
 export default class EventControlsCardViewController extends AbstractViewController {
     constructor(options) {
         super(options);
-        const { onSave, onCancel } = assertOptions(options, ['onCancel', 'onSave']);
+        const { onSave, onCancel, getHasPendingContextChanges, getContext, onCancelEvent, } = assertOptions(options, [
+            'onCancel',
+            'onSave',
+            'onCancelEvent',
+            'getHasPendingContextChanges',
+            'getContext',
+        ]);
         this.saveHandler = onSave;
         this.cancelHandler = onCancel;
-        this.cardVc = this.Controller('card', {
+        this.cancelEventHandler = onCancelEvent;
+        this.getHasPendingContextChangesHandler = getHasPendingContextChanges;
+        this.getContext = getContext;
+        this.cardVc = this.CardVc();
+        this.optionallyDropInCancelButton();
+    }
+    CardVc() {
+        return this.Controller('card', {
             footer: {
                 isEnabled: false,
                 isBusy: false,
@@ -50,7 +64,33 @@ export default class EventControlsCardViewController extends AbstractViewControl
         });
     }
     handleUpdateContext() {
-        this.cardVc.enableFooter();
+        if (this.getHasPendingContextChangesHandler()) {
+            this.cardVc.enableFooter();
+        }
+        else {
+            this.cardVc.disableFooter();
+        }
+        this.optionallyDropInCancelButton();
+    }
+    optionallyDropInCancelButton() {
+        var _a;
+        const { event } = this.getContext();
+        if ((event === null || event === void 0 ? void 0 : event.id) && !draftEventGenerator.isDraftId(event.id)) {
+            this.cardVc.setBody({
+                sections: [
+                    {
+                        buttons: [
+                            {
+                                id: 'cancel-event',
+                                label: `Cancel ${(_a = event.eventTypeSlug) !== null && _a !== void 0 ? _a : 'event'}`,
+                                type: 'destructive',
+                                onClick: () => this.cancelEventHandler(this.getContext().event.id),
+                            },
+                        ],
+                    },
+                ],
+            });
+        }
     }
     render() {
         return this.cardVc.render();

package/build/index-components.d.ts

@@ -15,5 +15,6 @@ export { default as CalendarToolRegistrar } from './toolBelt/CalendarToolRegistr
 export * from './toolBelt/CalendarToolRegistrar';
 export { default as AbstractCalendarEventToolBeltState } from './toolBelt/states/AbstractCalendarEventToolBeltState';
 export * from './toolBelt/states/AbstractCalendarEventToolBeltState';
+export { default as draftEventGenerator } from './utilities/draftGenerator';
 /** TYPES */
 export * from './types/calendar.types';

package/build/index-components.js

@@ -13,7 +13,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AbstractCalendarEventToolBeltState = exports.CalendarToolRegistrar = exports.EventRepeatingToolViewController = exports.EventDateTimeToolViewController = exports.EventControlsCardViewController = exports.CalendarViewController = exports.RepeatingControlsListViewController = exports.RepeatingCardViewController = void 0;
+exports.draftEventGenerator = exports.AbstractCalendarEventToolBeltState = exports.CalendarToolRegistrar = exports.EventRepeatingToolViewController = exports.EventDateTimeToolViewController = exports.EventControlsCardViewController = exports.CalendarViewController = exports.RepeatingControlsListViewController = exports.RepeatingCardViewController = void 0;
 /** COMPONENTS */
 var EventRepeatingTool_vc_1 = require("./viewControllers/EventRepeatingTool.vc");
 Object.defineProperty(exports, "RepeatingCardViewController", { enumerable: true, get: function () { return __importDefault(EventRepeatingTool_vc_1).default; } });
@@ -39,5 +39,7 @@ __exportStar(require("./toolBelt/CalendarToolRegistrar"), exports);
 var AbstractCalendarEventToolBeltState_1 = require("./toolBelt/states/AbstractCalendarEventToolBeltState");
 Object.defineProperty(exports, "AbstractCalendarEventToolBeltState", { enumerable: true, get: function () { return __importDefault(AbstractCalendarEventToolBeltState_1).default; } });
 __exportStar(require("./toolBelt/states/AbstractCalendarEventToolBeltState"), exports);
+var draftGenerator_1 = require("./utilities/draftGenerator");
+Object.defineProperty(exports, "draftEventGenerator", { enumerable: true, get: function () { return __importDefault(draftGenerator_1).default; } });
 /** TYPES */
 __exportStar(require("./types/calendar.types"), exports);

package/build/stores/RemoteEventStore.d.ts

@@ -4,13 +4,13 @@ import { UpdateEvent } from '../types/calendar.types';
 export interface RemoteEventStoreOptions {
     client: MercuryClient;
     calendarId?: string;
-    organizationId: string;
+    locationId: string;
 }
 declare type FullEvent = SpruceSchemas.CalendarUtils.v2021_05_19.CalendarEvent;
 export default class RemoteEventStore {
     private client;
     private calendarId?;
-    private organizationId;
+    private locationId;
     private pendingEvent?;
     private draftIdMap;
     private promises;

package/build/stores/RemoteEventStore.js

@@ -24,10 +24,10 @@ class RemoteEventStore {
         this.queueByEventId = {};
         this.busyByEvent = {};
         this.lastSavedById = {};
-        (0, schema_1.assertOptions)(options, ['client', 'organizationId']);
+        (0, schema_1.assertOptions)(options, ['client', 'locationId']);
         this.client = options.client;
         this.calendarId = options.calendarId;
-        this.organizationId = options.organizationId;
+        this.locationId = options.locationId;
     }
     async persist(event) {
         if (!this.resolveCalendarId(event)) {
@@ -127,7 +127,7 @@ class RemoteEventStore {
         payload = this.cleanPayload(payload);
         return {
             payload,
-            target: Object.assign(Object.assign({}, target), { calendarEventPersonId: personId, organizationId: this.organizationId }),
+            target: Object.assign(Object.assign({}, target), { calendarEventPersonId: personId, locationId: this.locationId }),
         };
     }
     cleanTarget(target) {
@@ -178,7 +178,7 @@ class RemoteEventStore {
         else {
             await this.client.emitAndFlattenResponses('calendar.delete-calendar-event::v2021_05_19', {
                 target: {
-                    organizationId: this.organizationId,
+                    locationId: this.locationId,
                     calendarEventId: id,
                 },
             });

package/build/toolBelt/states/AbstractCalendarEventToolBeltState.d.ts

@@ -1,5 +1,6 @@
 import { SpruceSchemas, ToolBeltState, ViewControllerId } from '@sprucelabs/heartwood-view-controllers';
 import { CalendarTool, CalendarToolBeltContext, CalendarToolBeltStateMachine, GetPersonFromEventHandler } from '../../types/calendar.types';
+import EventControlsCardViewController from '../../viewControllers/EventControlsCard.vc';
 declare type Tool = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.ToolBeltTool;
 export declare type AddToolOptions = Omit<Tool, 'card'> & {
     cardVcId: ViewControllerId;
@@ -18,7 +19,7 @@ export default abstract class AbstractCalendarEventToolBeltState implements Tool
     private handleDidUpdateContext;
     private getContext;
     clearPendingContextChanges(): Promise<void>;
-    addTool(options: AddToolOptions): Promise<void>;
+    addTool(options: AddToolOptions): Promise<CalendarTool>;
     private buildVcConstructorOptions;
     private addVc;
     protected getPersonFromEvent(): ReturnType<GetPersonFromEventHandler>;
@@ -26,6 +27,7 @@ export default abstract class AbstractCalendarEventToolBeltState implements Tool
     removeTool(id: string): void;
     getPendingContextChanges(): Partial<CalendarToolBeltContext>;
     getVcForTool(toolId: string): CalendarTool | undefined;
+    getControlsVc(): EventControlsCardViewController;
     destroy(): Promise<void>;
 }
 export {};

package/build/toolBelt/states/AbstractCalendarEventToolBeltState.js

@@ -17,10 +17,7 @@ class AbstractCalendarEventToolBeltState {
         this.sm = sm;
         this.toolBeltVc = sm.getToolBeltVc();
         this._isLoaded = true;
-        this.controlsVc = sm.Controller('calendar.event-controls-card', {
-            onCancel: this.clearPendingContextChanges.bind(this),
-            onSave: this.handleClickSave.bind(this),
-        });
+        this.controlsVc = sm.Controller('calendar.event-controls-card', Object.assign(Object.assign({ onCancel: this.clearPendingContextChanges.bind(this), onSave: this.handleClickSave.bind(this) }, this.buildVcConstructorOptions('controls')), { onCancelEvent: this.sm.getContext().cancelEvent }));
         this.toolBeltVc.clearTools();
         this.toolBeltVc.setStickyTool({
             card: this.controlsVc.render(),
@@ -64,12 +61,14 @@ class AbstractCalendarEventToolBeltState {
         const { cardVcId, lineIcon, id } = options;
         const vc = this.sm.Controller(cardVcId, this.buildVcConstructorOptions(id));
         await this.addVc(id, lineIcon, vc);
+        return vc;
     }
     buildVcConstructorOptions(id) {
         return {
             updateContext: (updates, options) => this.handleUpdateContextFromTool(updates, id, options),
             getContext: () => this.getContext(),
             getPersonFromEvent: () => this.getPersonFromEvent(),
+            getHasPendingContextChanges: () => Object.keys(this.pendingContextUpdates).length > 0,
         };
     }
     async addVc(toolId, lineIcon, vc) {
@@ -131,6 +130,9 @@ class AbstractCalendarEventToolBeltState {
         var _a;
         return (_a = this.vcs.find((v) => v.toolId === toolId)) === null || _a === void 0 ? void 0 : _a.vc;
     }
+    getControlsVc() {
+        return this.controlsVc;
+    }
     async destroy() {
         await this.sm.off('did-update-context', this.handleDidUpdateContext);
     }

package/build/types/calendar.types.d.ts

@@ -18,6 +18,7 @@ declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 export declare type CalendarToolBeltContext = SkillViewControllerLoadOptions & {
     event: CalendarEvent;
     calendarVc: CalendarViewController;
+    cancelEvent: CancelEventHandler;
 };
 export declare type CalendarToolBeltStateMachine = ToolBeltStateMachine<CalendarToolBeltContext>;
 export interface RemoteCalendarTool extends CalendarTool {
@@ -34,10 +35,13 @@ export interface UpdateCalendarContextOptions {
 export declare type UpdateCalendarToolBeltContextHandler = (context: Partial<CalendarToolBeltContext>, options?: UpdateCalendarContextOptions) => Promise<void>;
 export declare type GetCalendarToolBeltContextHandler = () => CalendarToolBeltContext;
 export declare type GetPersonFromEventHandler = () => Promise<Person | null>;
+export declare type GetHasPendingContextChangesHandler = () => boolean;
+export declare type CancelEventHandler = (eventId: string) => boolean | Promise<boolean | void> | void;
 export interface CalendarToolOptions {
     updateContext: UpdateCalendarToolBeltContextHandler;
     getContext: GetCalendarToolBeltContextHandler;
     getPersonFromEvent: GetPersonFromEventHandler;
+    getHasPendingContextChanges: GetHasPendingContextChangesHandler;
 }
 export interface EventWithToolBeltState {
     getToolBeltState(): ToolBeltState;

package/build/viewControllers/Calendar.vc.d.ts

@@ -30,6 +30,7 @@ export default class CalendarViewController extends CoreCalendarViewController {
     private eventSwappedHandler?;
     private dropEventHandler?;
     private isSwapping;
+    private lastSwappedId?;
     constructor(options: ViewControllerOptions & CalendarViewControllerOptions);
     private handleDropEvent;
     getCalendarVc(): this;

package/build/viewControllers/Calendar.vc.js

@@ -163,10 +163,15 @@ class CalendarViewController extends heartwood_view_controllers_1.CalendarViewCo
             if (!saved) {
                 return;
             }
-            if (draftGenerator_1.default.isDraftId(id) &&
-                !draftGenerator_1.default.isDraftId(saved.id)) {
-                await this.swapEvent(event, saved);
-                await ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+            if (id !== saved.id) {
+                if (this.lastSwappedId === id) {
+                    this.updateEvent(saved.id, saved);
+                }
+                else {
+                    this.lastSwappedId = id;
+                    await this.swapEvent(event, saved);
+                    await ((_b = this.eventSwappedHandler) === null || _b === void 0 ? void 0 : _b.call(this, saved));
+                }
             }
             else {
                 super.updateEvent(saved.id, { isBusy, error: undefined });

package/build/viewControllers/EventControlsCard.vc.d.ts

@@ -1,8 +1,9 @@
 import { AbstractViewController, SpruceSchemas, ViewControllerOptions } from '@sprucelabs/heartwood-view-controllers';
-import { CalendarTool } from '../types/calendar.types';
+import { CalendarTool, CalendarToolOptions, CancelEventHandler } from '../types/calendar.types';
 declare type Card = SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
-export interface EventControlsCardOptions {
+export interface EventControlsCardOptions extends CalendarToolOptions {
     onCancel: () => Promise<void | boolean> | void | boolean;
+    onCancelEvent: CancelEventHandler;
     onSave: () => Promise<void | boolean> | void | boolean;
 }
 export default class EventControlsCardViewController extends AbstractViewController<Card> implements CalendarTool {
@@ -10,10 +11,15 @@ export default class EventControlsCardViewController extends AbstractViewControl
     private cardVc;
     private saveHandler;
     private cancelHandler;
+    private getHasPendingContextChangesHandler;
+    private getContext;
+    private cancelEventHandler;
     constructor(options: ViewControllerOptions & EventControlsCardOptions);
+    private CardVc;
     private handleClickCancel;
     private handleClickSave;
     handleUpdateContext(): void;
+    private optionallyDropInCancelButton;
     render(): SpruceSchemas.HeartwoodViewControllers.v2021_02_11.Card;
 }
 export {};

package/build/viewControllers/EventControlsCard.vc.js

@@ -1,14 +1,31 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 const heartwood_view_controllers_1 = require("@sprucelabs/heartwood-view-controllers");
 const schema_1 = require("@sprucelabs/schema");
+const draftGenerator_1 = __importDefault(require("../utilities/draftGenerator"));
 class EventControlsCardViewController extends heartwood_view_controllers_1.AbstractViewController {
     constructor(options) {
         super(options);
-        const { onSave, onCancel } = (0, schema_1.assertOptions)(options, ['onCancel', 'onSave']);
+        const { onSave, onCancel, getHasPendingContextChanges, getContext, onCancelEvent, } = (0, schema_1.assertOptions)(options, [
+            'onCancel',
+            'onSave',
+            'onCancelEvent',
+            'getHasPendingContextChanges',
+            'getContext',
+        ]);
         this.saveHandler = onSave;
         this.cancelHandler = onCancel;
-        this.cardVc = this.Controller('card', {
+        this.cancelEventHandler = onCancelEvent;
+        this.getHasPendingContextChangesHandler = getHasPendingContextChanges;
+        this.getContext = getContext;
+        this.cardVc = this.CardVc();
+        this.optionallyDropInCancelButton();
+    }
+    CardVc() {
+        return this.Controller('card', {
             footer: {
                 isEnabled: false,
                 isBusy: false,
@@ -39,7 +56,33 @@ class EventControlsCardViewController extends heartwood_view_controllers_1.Abstr
         this.cardVc.disableFooter();
     }
     handleUpdateContext() {
-        this.cardVc.enableFooter();
+        if (this.getHasPendingContextChangesHandler()) {
+            this.cardVc.enableFooter();
+        }
+        else {
+            this.cardVc.disableFooter();
+        }
+        this.optionallyDropInCancelButton();
+    }
+    optionallyDropInCancelButton() {
+        var _a;
+        const { event } = this.getContext();
+        if ((event === null || event === void 0 ? void 0 : event.id) && !draftGenerator_1.default.isDraftId(event.id)) {
+            this.cardVc.setBody({
+                sections: [
+                    {
+                        buttons: [
+                            {
+                                id: 'cancel-event',
+                                label: `Cancel ${(_a = event.eventTypeSlug) !== null && _a !== void 0 ? _a : 'event'}`,
+                                type: 'destructive',
+                                onClick: () => this.cancelEventHandler(this.getContext().event.id),
+                            },
+                        ],
+                    },
+                ],
+            });
+        }
     }
     render() {
         return this.cardVc.render();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sprucelabs/spruce-calendar-components",
   "description": "Calendar components for working with calendars and Sprucebot.",
-  "version": "19.2.0",
+  "version": "20.1.0",
   "skill": {
     "namespace": "calendar"
   },