Ja vr private descriptions

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');
@@ -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/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/upcoming-events/ducks/types.ts

@@ -23,6 +23,7 @@ export interface EventInformation {
   thumbnail?: string;
   details: {
     description: string;
+    privateDescription?: string;
     location: string;
     start: Date;
     end: Date;