Add invitations to activity center (#153)

packages/react-chat/src/components/ActivityCenter.tsx

@@ -8,6 +8,7 @@ import { useClickOutside } from "../hooks/useClickOutside";
 import { Activity } from "../models/Activity";
 import { equalDate } from "../utils/equalDate";
 
+import { DownloadButton } from "./Buttons/DownloadButton";
 import { buttonStyles } from "./Buttons/buttonStyle";
 import { Mention } from "./Chat/ChatMessageContent";
 import {
@@ -21,10 +22,12 @@ import {
   UserName,
   UserNameWrapper,
 } from "./Chat/ChatMessages";
+import { Logo } from "./CommunityIdentity";
 import { ContactMenu } from "./Form/ContactMenu";
 import { Tooltip } from "./Form/Tooltip";
 import { CheckSvg } from "./Icons/CheckIcon";
 import { ClearSvg } from "./Icons/ClearIcon";
+import { CommunityIcon } from "./Icons/CommunityIcon";
 import { GroupIcon } from "./Icons/GroupIcon";
 import { HideIcon } from "./Icons/HideIcon";
 import { Icon } from "./Icons/Icon";
@@ -142,6 +145,25 @@ function ActivityMessage({
                   : ": "}
               </ContextHeading>
             )}
+            {type === "invitation" && (
+              <FlexDiv>
+                <ContextHeading>{`Invited you to join a community `}</ContextHeading>
+                <Tag>
+                  <CommunityIcon />
+                  <CommunityLogo
+                    style={{
+                      backgroundImage: activity.invitation?.icon
+                        ? `url(${activity.invitation?.icon}`
+                        : "",
+                    }}
+                  >
+                    {activity.invitation?.icon === undefined &&
+                      activity.invitation?.name.slice(0, 1).toUpperCase()}
+                  </CommunityLogo>
+                  <span>{activity.invitation?.name}</span>
+                </Tag>
+              </FlexDiv>
+            )}
             <ActivityText>
               {activity.message?.content && (
                 <div>{elements.map((el) => el)}</div>
@@ -166,6 +188,12 @@ function ActivityMessage({
                 </Tag>
               </ReplyWrapper>
             )}
+            {type === "invitation" && (
+              <InviteDiv>
+                <ContextHeading>{`To access other communities, `}</ContextHeading>
+                <DownloadButton className="activity" />
+              </InviteDiv>
+            )}
           </ActivityContent>
         </>
         {type === "request" &&
@@ -211,7 +239,7 @@ function ActivityMessage({
         {type === "request" && activity.status === "sent" && (
           <RequestStatus>Sent</RequestStatus>
         )}
-        {type !== "request" && (
+        {(type === "mention" || type === "reply") && (
           <BtnWrapper>
             <ActivityBtn
               onClick={() => {
@@ -263,14 +291,14 @@ export function ActivityCenter({ setShowActivityCenter }: ActivityCenterProps) {
   return (
     <ActivityBlock ref={ref}>
       <ActivityFilter>
-        <Filters>
+        <FlexDiv>
           <FilterBtn onClick={() => setFilter("")}>All</FilterBtn>
           <FilterBtn onClick={() => setFilter("mention")}>Mentions</FilterBtn>
           <FilterBtn onClick={() => setFilter("reply")}>Replies</FilterBtn>
           <FilterBtn onClick={() => setFilter("request")}>
             Contact requests
           </FilterBtn>
-        </Filters>
+        </FlexDiv>
         <Btns>
           <BtnWrapper>
             <ActivityBtn
@@ -327,10 +355,15 @@ const ActivityFilter = styled.div`
   padding: 13px 16px;
 `;
 
-const Filters = styled.div`
+const FlexDiv = styled.div`
   display: flex;
 `;
 
+const InviteDiv = styled.div`
+  display: flex;
+  margin-top: -4px;
+`;
+
 const FilterBtn = styled.button`
   ${buttonStyles}
   ${textSmallStyles}
@@ -459,6 +492,7 @@ const ContextHeading = styled.p`
   font-style: italic;
   color: ${({ theme }) => theme.secondary};
   flex-shrink: 0;
+  white-space: pre-wrap;
   ${textMediumStyles}
 `;
 
@@ -504,3 +538,11 @@ const ReplyWrapper = styled.div`
     margin-right: 4px;
   }
 `;
+
+const CommunityLogo = styled(Logo)`
+  width: 16px;
+  height: 16px;
+  margin: 0 2px 0 4px;
+
+  ${textSmallStyles}
+`;

packages/react-chat/src/components/Buttons/DownloadButton.tsx

@@ -53,7 +53,9 @@ export const DownloadButton = ({ className }: DownloadButtonProps) => {
       target="_blank"
       rel="noopener noreferrer"
     >
-      {os ? `Download Status for ${os}` : "Download Status"}
+      {os
+        ? `${className === "activity" ? "d" : "D"}ownload Status for ${os}`
+        : `${className === "activity" ? "d" : "D"}ownload Status`}
     </Link>
   );
 };
@@ -67,4 +69,20 @@ const Link = styled.a`
   &:hover {
     background: ${({ theme }) => theme.buttonBgHover};
   }
+
+  &.activity {
+    margin: 0;
+    padding: 0;
+    color: ${({ theme }) => theme.secondary};
+    font-style: italic;
+    border-radius: 0;
+    font-weight: 400;
+    text-decoration: underline;
+    background: inherit;
+
+    &:hover {
+      background: inherit;
+      color: ${({ theme }) => theme.tertiary};
+    }
+  }
 `;

packages/react-chat/src/components/CommunityIdentity.tsx

@@ -47,7 +47,7 @@ export const Column = styled.div`
   align-items: flex-start;
 `;
 
-const Logo = styled.div`
+export const Logo = styled.div`
   width: 36px;
   height: 36px;
   display: flex;

packages/react-chat/src/components/Icons/CommunityIcon.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+
+export const CommunityIcon = () => {
+  return (
+    <Icon
+      width="17"
+      height="16"
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.6641 14C11.7686 14 12.6641 13.1046 12.6641 12C13.7686 12 14.6641 11.1046 14.6641 10V4C14.6641 2.89543 13.7686 2 12.6641 2C7.14121 2 2.66406 6.47715 2.66406 12C2.66406 13.1046 3.55949 14 4.66406 14H10.6641ZM5.16406 12C4.88792 12 4.66244 11.7755 4.67944 11.4999C4.92738 7.47997 8.14404 4.26332 12.164 4.01538C12.4396 3.99838 12.6641 4.22386 12.6641 4.5V5.5C12.6641 5.77614 12.4394 5.99783 12.1642 6.02052C9.24919 6.26094 6.925 8.58513 6.68459 11.5002C6.66189 11.7754 6.4402 12 6.16406 12H5.16406ZM12.6641 8.5C12.6641 8.22386 12.4391 7.99672 12.1651 8.03082C10.3549 8.25609 8.92015 9.69083 8.69489 11.501C8.66078 11.775 8.88792 12 9.16406 12H10.1641C10.4402 12 10.6576 11.7727 10.7258 11.5051C10.9057 10.7982 11.4622 10.2417 12.1691 10.0617C12.4367 9.99359 12.6641 9.77614 12.6641 9.5V8.5Z"
+      />
+    </Icon>
+  );
+};
+
+const Icon = styled.svg`
+  fill: ${({ theme }) => theme.secondary};
+`;

packages/react-chat/src/models/Activity.ts

@@ -1,9 +1,10 @@
 import { ChannelData } from "./ChannelData";
 import { ChatMessage } from "./ChatMessage";
+import { CommunityData } from "./CommunityData";
 
 export type Activity = {
   id: string;
-  type: "mention" | "request" | "reply";
+  type: "mention" | "request" | "reply" | "invitation";
   isRead?: boolean;
   date: Date;
   user: string;
@@ -13,6 +14,7 @@ export type Activity = {
   requestType?: "outcome" | "income";
   status?: "sent" | "accepted" | "declined" | "blocked";
   quote?: ChatMessage;
+  invitation?: CommunityData;
 };
 
 export type Activities = {