Ja vr private descriptions

src/api/protectedApiClient.ts

@@ -52,6 +52,7 @@ export interface ProtectedApiClient {
     eventId: number,
     request: UpdateTicketsRequest,
   ) => Promise<void>;
+  readonly getProtectedEvents: () => Promise<EventInformation[]>;
   readonly getMyEvents: () => Promise<EventInformation[]>;
   readonly getRequestStatuses: () => Promise<PersonalRequest[]>;
   readonly makePFRequest: () => Promise<void>;
@@ -130,6 +131,12 @@ const updateTickets = (eventId: number, request: UpdateTicketsRequest) => {
   });
 };
 
+const getProtectedEvents = (): Promise<EventInformation[]> => {
+  return AppAxiosInstance.get(`${ProtectedApiClientRoutes.EVENTS}`).then(
+    (res) => res.data.events,
+  );
+};
+
 const getMyEvents = (): Promise<EventInformation[]> => {
   return AppAxiosInstance.get(
     `${ProtectedApiClientRoutes.EVENTS}/signed_up`,
@@ -301,6 +308,7 @@ const Client: ProtectedApiClient = Object.freeze({
   getAllUsersContactInfo,
   createAnnouncement,
   deleteAnnouncement,
+  getProtectedEvents,
 });
 
 export default Client;

src/components/EventsForm.tsx

@@ -51,12 +51,14 @@ export interface EventsForm {
 
 export interface EventsFormData extends EventsForm {
   thumbnail?: FileField;
+  privateDescription?: string;
   start: Date;
   end: Date;
 }
 
 export interface EventsFormInitialValues extends EventsForm {
   thumbnail?: string;
+  privateDescription?: string;
   start: Moment;
   end: Moment;
 }
@@ -177,10 +179,19 @@ const EventsForm: React.FC<EventsFormProps> = ({
           <TextArea rows={3} placeholder="Description" />
         </Form.Item>
 
-        {/* TODO: come back to this in a second PR because it requires backend changes too :)
-        <Form.Item label="Meeting Link" name="meetingLink">
-          <Input placeholder="Meeting Link" />
-        </Form.Item> */}
+        <Form.Item
+          label="Private Description"
+          name="privateDescription"
+          rules={[
+            {
+              required: false,
+              message:
+                'Input an event description intended only for registered members (i.e. Zoom meeting link)',
+            },
+          ]}
+        >
+          <TextArea rows={3} placeholder="Private Description" />
+        </Form.Item>
 
         <Form.Item label="Add Image" name="thumbnail">
           <Dragger multiple={false} beforeUpload={() => false}>

src/components/event-details/EventDetails.tsx

@@ -23,20 +23,22 @@ const BottomWrapper = styled.div`
 const DescriptionWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
-  width: 50%;
+  width: 47%;
   text-align: left;
   margin-bottom: 16px;
+  margin-right: 32px;
   height: min-content;
 
   @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     width: 100%;
+    margin-right: 0px;
   }
 `;
 
 const AnnouncementsWrapper = styled.div`
   display: flex;
   flex-wrap: wrap;
-  width: 50%;
+  width: 47%;
 
   @media screen and (max-width: ${PRIMARY_BREAKPOINT}) {
     width: 100%;
@@ -137,9 +139,10 @@ const AnnouncementsTitle = styled(Title)`
   width: 100%;
 `;
 
-const AnnouncementBox = styled.div``;
-
-const AnnouncementNoContent = styled(AnnouncementBox)``;
+const AnnouncementBox = styled.div`
+  height: min-content;
+  width: 100%;
+`;
 
 export interface EventDetailsProps extends EventInformation {
   announcements?: EventAnnouncement[];
@@ -163,7 +166,7 @@ const EventDetails: React.FC<EventDetailsProps> = ({
     setDisplayEventRegistrationModal,
   ] = useState<boolean>(false);
 
-  const { description, location, start, end } = details;
+  const { description, privateDescription, location, start, end } = details;
 
   const computeDateString = () => {
     const startDate = dateFormat(start, 'longDate');
@@ -198,7 +201,7 @@ const EventDetails: React.FC<EventDetailsProps> = ({
           <InfoWrapper>
             <Info>
               <StyledTitle level={3}>{title}</StyledTitle>
-              {ticketCount && (
+              {ticketCount !== undefined && ticketCount > 0 && (
                 <EventsTag color={'green'}>
                   Registered {ticketCount} tickets
                 </EventsTag>
@@ -221,28 +224,36 @@ const EventDetails: React.FC<EventDetailsProps> = ({
         <DescriptionWrapper>
           <DescriptionTitle level={5}>Description</DescriptionTitle>
           <Typography>{description}</Typography>
+          {privateDescription !== null && (
+            <>
+              <DescriptionTitle level={5}>Private Description</DescriptionTitle>
+              <Typography>{privateDescription}</Typography>
+            </>
+          )}
         </DescriptionWrapper>
         <AnnouncementsWrapper>
           {announcements && (
             <>
               {announcements.length ? (
                 <AnnouncementBox>
-                  <Title level={5}>Updates for this Event</Title>
+                  <AnnouncementsTitle level={5}>
+                    Updates for this Event
+                  </AnnouncementsTitle>
                   {announcements.map((announcement, i) => {
                     return (
                       <AnnouncementCard {...announcement} key={i} condensed />
                     );
                   })}
                 </AnnouncementBox>
               ) : (
-                <>
+                <AnnouncementBox>
                   <AnnouncementsTitle level={5}>
                     Updates for this Event
                   </AnnouncementsTitle>
-                  <AnnouncementNoContent>
+                  <Typography>
                     There are no announcements for this event
-                  </AnnouncementNoContent>
-                </>
+                  </Typography>
+                </AnnouncementBox>
               )}
             </>
           )}

src/components/event-listing/EventListing.tsx

@@ -99,7 +99,7 @@ const EventListing: React.FC<EventListingProps> = ({
         <Thumbnail src={thumbnail || DEFAULT_IMAGE} />
         <Info>
           <InlineTitle level={3}>{title}</InlineTitle>
-          {ticketCount && (
+          {ticketCount !== undefined && ticketCount > 0 && (
             <>
               <EventTag color="green">
                 Registered {ticketCount} tickets

src/containers/createEvent/ducks/types.ts

@@ -5,6 +5,7 @@ export interface NewEventInformation {
   price: number;
   details: {
     description: string;
+    privateDescription?: string;
     location: string;
     start: Date;
     end: Date;

src/containers/createEvent/index.tsx

@@ -44,6 +44,7 @@ const CreateEventContainer: React.FC = () => {
         price: data.price,
         details: {
           description: data.description,
+          privateDescription: data.privateDescription,
           location: data.location,
           start: data.start,
           end: data.end,

src/containers/editEvent/index.tsx

@@ -74,6 +74,7 @@ const EditEventContainer: React.FC = () => {
         price: data.price,
         details: {
           description: data.description,
+          privateDescription: data.privateDescription,
           location: data.location,
           start: data.start,
           end: data.end,
@@ -94,6 +95,7 @@ const EditEventContainer: React.FC = () => {
       thumbnail: info.thumbnail,
       price: info.price,
       description: info.details.description,
+      privateDescription: info.details.privateDescription,
       location: info.details.location,
       start: moment(info.details.start),
       end: moment(info.details.end),

src/containers/singleEvent/index.tsx

@@ -132,8 +132,9 @@ const SingleEvent: React.FC<SingleEventProps> = ({
       if (!event) {
         event = events.result.find((e) => e.id === id);
       }
-      const hasRegistered =
-        (event && event.ticketCount && event.ticketCount > 0) !== undefined;
+      const hasRegistered = Boolean(
+        event && event.ticketCount && event.ticketCount > 0,
+      );
       if (event) {
         return (
           <>

src/containers/upcoming-events/ducks/thunks.ts

@@ -1,11 +1,18 @@
-import { EventInformation, EventsThunkAction } from './types';
+import { getPrivilegeLevel } from '../../../auth/ducks/selectors';
+import { PrivilegeLevel } from '../../../auth/ducks/types';
 import { upcomingEvents } from './actions';
+import { EventInformation, EventsThunkAction } from './types';
 
 export const getUpcomingEvents = (): EventsThunkAction<void> => {
-  return (dispatch, getState, { publicApiClient }) => {
+  return (dispatch, getState, { publicApiClient, protectedApiClient }) => {
+    const eventsFetcher: () => Promise<EventInformation[]> =
+      getPrivilegeLevel(getState().authenticationState.tokens) ===
+      PrivilegeLevel.NONE
+        ? publicApiClient.getUpcomingEvents
+        : protectedApiClient.getProtectedEvents;
+
     dispatch(upcomingEvents.loading());
-    return publicApiClient
-      .getUpcomingEvents()
+    return eventsFetcher()
       .then((response: EventInformation[]) => {
         dispatch(upcomingEvents.loaded(response));
       })

src/containers/upcoming-events/ducks/types.ts

@@ -1,6 +1,6 @@
 import { ThunkAction } from 'redux-thunk';
 import { PublicApiExtraArgs } from '../../../api/publicApiClient';
-import { C4CState } from '../../../store';
+import { C4CState, ThunkExtraArgs } from '../../../store';
 import { AsyncRequest } from '../../../utils/asyncRequest';
 import { EventsActions } from './actions';
 
@@ -11,7 +11,7 @@ export interface EventsReducerState {
 export type EventsThunkAction<R> = ThunkAction<
   R,
   C4CState,
-  PublicApiExtraArgs,
+  ThunkExtraArgs,
   EventsActions
 >;
 
@@ -23,6 +23,7 @@ export interface EventInformation {
   thumbnail?: string;
   details: {
     description: string;
+    privateDescription?: string;
     location: string;
     start: Date;
     end: Date;