feat(hub-common): add register button

packages/common/src/core/types/ActionLinks.ts

@@ -29,6 +29,8 @@ interface IHubBaseActionLink {
   description?: string;
   /** action icon */
   icon?: string;
+  /** whether or not to disable the button */
+  disabled?: boolean;
 }
 
 /**

packages/common/src/events/_internal/PropertyMapper.ts

@@ -3,6 +3,7 @@ import {
   mapEntityToStore,
   mapStoreToEntity,
 } from "../../core/_internal/PropertyMapper";
+import { HubActionLink } from "../../core/types/ActionLinks";
 import { IHubEvent } from "../../core/types/IHubEvent";
 import { SettableAccessLevel } from "../../core/types/types";
 import { cloneObject } from "../../util";
@@ -16,6 +17,7 @@ import {
 import { HubEventAttendanceType, HubEventOnlineCapacityType } from "../types";
 import { computeLinks } from "./computeLinks";
 import { getEventSlug } from "./getEventSlug";
+import { getEventThumbnail } from "./getEventThumbnail";
 
 /**
  * @private
@@ -89,6 +91,18 @@ export class EventPropertyMapper extends PropertyMapper<
     obj.updatedDateSource = "updatedAt";
     obj.links = computeLinks(store as IEvent);
     obj.slug = getEventSlug(store as IEvent);
+    obj.thumbnailUrl = getEventThumbnail();
+
+    const heroActions: HubActionLink[] = [];
+    if (store.allowRegistration) {
+      heroActions.push({
+        kind: "well-known",
+        action: "register",
+        label: "{{actions.register:translate}}",
+        disabled: obj.isCanceled,
+      });
+    }
+    obj.view = { heroActions };
 
     return obj;
   }

packages/common/src/events/_internal/computeLinks.ts

@@ -3,6 +3,7 @@ import { getRelativeWorkspaceUrl } from "../../core/getRelativeWorkspaceUrl";
 import { getHubRelativeUrl } from "../../content/_internal/internalContentUtils";
 import { IEvent } from "../api/orval/api/orval-events";
 import { getEventSlug } from "./getEventSlug";
+import { getEventThumbnail } from "./getEventThumbnail";
 
 /**
  * Compute the links that get appended to a Hub Event
@@ -18,7 +19,6 @@ export function computeLinks(event: IEvent): IHubEntityLinks {
     siteRelative,
     siteRelativeEntityType: getHubRelativeUrl("event"),
     workspaceRelative: getRelativeWorkspaceUrl("Event", event.id),
-    // TODO
-    // thumbnail: "",
+    thumbnail: getEventThumbnail(),
   };
 }

packages/common/src/events/_internal/getEventThumbnail.ts

@@ -0,0 +1,3 @@
+export function getEventThumbnail(): string {
+  return "https://hubcdn.arcgis.com/opendata-ui/assets/ember-arcgis-opendata-components/assets/images/placeholders/event.png";
+}

packages/common/src/events/defaults.ts

@@ -35,6 +35,9 @@ export function buildDefaultEventEntity(): Partial<IHubEvent> {
     readGroupIds: [],
     editGroupIds: [],
     ...dates,
+    view: {
+      heroActions: [],
+    },
   };
 }
 

packages/common/test/events/_internal/PropertyMapper.test.ts

@@ -1,5 +1,6 @@
 import { IHubEvent } from "../../../src/core/types/IHubEvent";
 import { EventPropertyMapper } from "../../../src/events/_internal/PropertyMapper";
+import { getEventThumbnail } from "../../../src/events/_internal/getEventThumbnail";
 import { getPropertyMap } from "../../../src/events/_internal/getPropertyMap";
 import { IOnlineMeeting } from "../../../src/events/api/orval/api/orval-events";
 import {
@@ -152,8 +153,13 @@ describe("PropertyMapper", () => {
           siteRelative: "/events/event-title-31c",
           siteRelativeEntityType: "",
           workspaceRelative: "/workspace/events/31c",
+          thumbnail: getEventThumbnail(),
         },
         slug: "event-title-31c",
+        thumbnailUrl: getEventThumbnail(),
+        view: {
+          heroActions: [],
+        },
       });
     });
 
@@ -195,6 +201,22 @@ describe("PropertyMapper", () => {
       const res = propertyMapper.storeToEntity(eventRecord, {});
       expect(res.attendanceType).toEqual(HubEventAttendanceType.Both);
     });
+
+    it("disables registration if canceled", () => {
+      eventRecord.allowRegistration = true;
+      eventRecord.status = EventStatus.CANCELED;
+      const res = propertyMapper.storeToEntity(eventRecord, {});
+      expect(res.view).toEqual({
+        heroActions: [
+          {
+            kind: "well-known",
+            action: "register",
+            label: "{{actions.register:translate}}",
+            disabled: true,
+          },
+        ],
+      });
+    });
   });
 
   describe("entityToStore", () => {

packages/common/test/events/_internal/computeLinks.test.ts

@@ -1,5 +1,6 @@
 import { IEvent } from "../../../src/events/api/orval/api/orval-events";
 import { computeLinks } from "../../../src/events/_internal/computeLinks";
+import { getEventThumbnail } from "../../../src/events/_internal/getEventThumbnail";
 
 describe("computeLinks", () => {
   it("should compute links for an event", () => {
@@ -13,6 +14,7 @@ describe("computeLinks", () => {
       siteRelative: "/events/my-events-are-awesome-123-31c",
       siteRelativeEntityType: "",
       workspaceRelative: "/workspace/events/31c",
+      thumbnail: getEventThumbnail(),
     });
   });
 });

packages/common/test/events/defaults.test.ts

@@ -47,6 +47,9 @@ describe("HubEvent defaults:", () => {
         tags: [],
         readGroupIds: [],
         editGroupIds: [],
+        view: {
+          heroActions: [],
+        },
         ...datesAndTimes,
       });
       expect(getDefaultEventDatesAndTimesSpy).toHaveBeenCalledTimes(1);

packages/common/test/search/_internal/hubEventsHelpers/eventToSearchResult.test.ts

@@ -3,6 +3,7 @@ import { AccessLevel } from "../../../../src/core/types/types";
 import { EventAccess, IEvent } from "../../../../src/events/api/types";
 import { eventToSearchResult } from "../../../../src/search/_internal/hubEventsHelpers/eventToSearchResult";
 import { IHubSearchOptions } from "../../../../src/search/types/IHubSearchOptions";
+import { getEventThumbnail } from "../../../../src/events/_internal/getEventThumbnail";
 
 describe("eventToSearchResult", () => {
   const options = {
@@ -61,6 +62,7 @@ describe("eventToSearchResult", () => {
         siteRelative: `/events/my-event-title-${event.id}`,
         siteRelativeEntityType: "",
         workspaceRelative: `/workspace/events/${event.id}`,
+        thumbnail: getEventThumbnail(),
       },
       tags: event.tags,
       categories: event.categories,
@@ -96,6 +98,7 @@ describe("eventToSearchResult", () => {
         siteRelative: `/events/my-event-title-${event.id}`,
         siteRelativeEntityType: "",
         workspaceRelative: `/workspace/events/${event.id}`,
+        thumbnail: getEventThumbnail(),
       },
       tags: event.tags,
       categories: event.categories,