Merge pull request #2030 from daostack/dev

Sprint 28

package.json

@@ -64,9 +64,9 @@
     "redux": "^4.0.4",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
-    "slate": "^0.87.0",
-    "slate-history": "^0.86.0",
-    "slate-react": "^0.88.0",
+    "slate": "^0.94.1",
+    "slate-history": "^0.93.0",
+    "slate-react": "^0.98.1",
     "styled-components": "^5.2.1",
     "swiper": "^6.5.9",
     "typesafe-actions": "^4.4.2",

src/pages/Login/containers/LoginContainer/helpers.ts

@@ -13,6 +13,10 @@ const PAGES_WITH_ALLOWED_SIGN_UP = [
   ROUTE_PATHS.V04_COMMON_ABOUT_TAB,
   ROUTE_PATHS.V04_COMMON_MEMBERS_TAB,
   ROUTE_PATHS.V04_COMMON_WALLET_TAB,
+  ROUTE_PATHS.COMMON,
+  ROUTE_PATHS.COMMON_ABOUT_TAB,
+  ROUTE_PATHS.COMMON_MEMBERS_TAB,
+  ROUTE_PATHS.COMMON_WALLET_TAB,
 ];
 
 export const getAuthCode = (

src/pages/OldCommon/components/CommonDetailContainer/ChatComponent/ChatComponent.tsx

@@ -274,6 +274,7 @@ export default function ChatComponent({
                     <ChatMessage
                       key={message.id}
                       user={user}
+                      commonMember={commonMember}
                       discussionMessage={message}
                       chatType={type}
                       scrollToRepliedMessage={scrollToRepliedMessage}

src/pages/OldCommon/components/CommonDetailContainer/ChatComponent/ChatMessage.tsx

@@ -5,8 +5,10 @@ import { Orientation, ChatType, EntityTypes } from "@/shared/constants";
 import {
   checkIsSystemDiscussionMessage,
   checkIsUserDiscussionMessage,
+  CommonMember,
   DiscussionMessage,
   User,
+  Circles,
 } from "@/shared/models";
 import { StaticLinkType, getUserName } from "@/shared/utils";
 import EditMessageInput from "./EditMessageInput";
@@ -19,6 +21,8 @@ interface ChatMessageProps {
   onMessageDropdownOpen?: (isOpen: boolean) => void;
   user: User | null;
   scrollToRepliedMessage: (messageId: string) => void;
+  commonMember: CommonMember | null;
+  governanceCircles?: Circles;
 }
 
 const getStaticLinkByChatType = (chatType: ChatType): StaticLinkType => {
@@ -38,6 +42,8 @@ export default function ChatMessage({
   onMessageDropdownOpen,
   user,
   scrollToRepliedMessage,
+  commonMember,
+  governanceCircles,
 }: ChatMessageProps) {
   const [isEditMode, setEditMode] = useState(false);
   const createdAtDate = new Date(discussionMessage.createdAt.seconds * 1000);
@@ -122,6 +128,8 @@ export default function ChatMessage({
               </div>
             </div>
             <ElementDropdown
+              commonMember={commonMember}
+              governanceCircles={governanceCircles}
               linkType={getStaticLinkByChatType(chatType)}
               entityType={
                 [ChatType.DiscussionMessages, ChatType.ChatMessages].includes(

src/pages/OldCommon/components/CommonDetailContainer/DiscussionsComponent/DiscussionItemComponent.tsx

@@ -4,7 +4,7 @@ import { getCommonGovernanceCircles } from "@/pages/OldCommon/store/api";
 import { ElementDropdown } from "@/shared/components";
 import { EntityTypes } from "@/shared/constants";
 import { useFullText } from "@/shared/hooks";
-import { Discussion, Governance } from "@/shared/models";
+import { CommonMember, Discussion, Governance } from "@/shared/models";
 import {
   checkIsTextEditorValueEmpty,
   parseStringToTextEditorValue,
@@ -23,12 +23,14 @@ interface DiscussionItemComponentProps {
   discussion: Discussion;
   loadDiscussionDetail: (payload: { discussion: Discussion }) => void;
   governance: Governance;
+  commonMember: CommonMember | null;
 }
 
 export default function DiscussionItemComponent({
   discussion,
   loadDiscussionDetail,
   governance,
+  commonMember,
 }: DiscussionItemComponentProps) {
   const [imageError, setImageError] = useState(false);
   const [circleNames, setCircleNames] = useState("");
@@ -91,6 +93,8 @@ export default function DiscussionItemComponent({
           </div>
         </div>
         <ElementDropdown
+          commonMember={commonMember}
+          governanceCircles={governance.circles}
           entityType={EntityTypes.Discussion}
           linkType={StaticLinkType.Discussion}
           elem={discussion}

src/pages/OldCommon/components/CommonDetailContainer/DiscussionsComponent/DiscussionsComponent.tsx

@@ -55,6 +55,7 @@ export default function DiscussionsComponent({
               <DiscussionItemComponent
                 key={d.id}
                 discussion={d}
+                commonMember={commonMember}
                 loadDiscussionDetail={loadDiscussionDetail}
                 governance={governance}
               />

src/pages/OldCommon/components/CommonDetailContainer/ProposalsComponent/ProposalItemComponent.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { useCommonMember } from "@/pages/OldCommon/hooks";
 import { UserAvatar, ElementDropdown } from "@/shared/components";
 import { EntityTypes, ProposalsTypes } from "@/shared/constants";
-import { Proposal } from "@/shared/models";
+import { Circles, Proposal } from "@/shared/models";
 import {
   StaticLinkType,
   formatPrice,
@@ -15,11 +15,13 @@ import { VotesComponent } from "../VotesComponent";
 interface ProposalItemComponentProps {
   loadProposalDetail: (payload: Proposal) => void;
   proposal: Proposal;
+  governanceCircles?: Circles;
 }
 
 export default function ProposalItemComponent({
   proposal,
   loadProposalDetail,
+  governanceCircles,
 }: ProposalItemComponentProps) {
   const { data: commonMember } = useCommonMember();
 
@@ -44,6 +46,8 @@ export default function ProposalItemComponent({
           </div>
           <div onClick={(e) => e.stopPropagation()}>
             <ElementDropdown
+              commonMember={commonMember}
+              governanceCircles={governanceCircles}
               entityType={EntityTypes.Proposal}
               linkType={StaticLinkType.Proposal}
               elem={proposal}

src/pages/OldCommon/components/CommonDetailContainer/ProposalsComponent/ProposalsComponent.tsx

@@ -54,6 +54,7 @@ export default function ProposalsComponent({
                     key={proposal.id}
                     proposal={proposal}
                     loadProposalDetail={loadProposalDetail}
+                    governanceCircles={governance.circles}
                   />
                 );
               }

src/pages/common/components/ChatComponent/ChatComponent.module.scss

@@ -64,12 +64,20 @@
   align-items: flex-end;
 }
 
+.loaderWrapper {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .permissionsText {
   font-size: $mobile-title;
-  color: $light-gray-2;
+  color: var(--primary-fill);
   margin-right: 0.3125rem;
   width: 100%;
   text-align: center;
+  cursor: pointer;
 }
 
 .messageInput {
@@ -92,11 +100,8 @@
 }
 
 .messageInputEmpty {
-  line-height: 2.625rem;
+  line-height: 2.25rem;
   padding-left: 0;
-  @include tablet {
-    line-height: 0;
-  }
 }
 
 .addFilesIcon {

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   ChangeEvent,
   useRef,
+  ReactNode,
 } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useDebounce, useMeasure } from "react-use";
@@ -47,6 +48,7 @@ import {
   TextEditorSize,
   removeTextEditorEmptyEndLinesValues,
   countTextEditorEmojiElements,
+  Loader,
 } from "@/shared/ui-kit";
 import { getUserName, hasPermission, isMobile } from "@/shared/utils";
 import {
@@ -86,6 +88,8 @@ interface ChatComponentInterface {
   isHidden: boolean;
   onMessagesAmountChange?: (newMessagesAmount: number) => void;
   directParent?: DirectParent | null;
+  isJoinPending?: boolean;
+  onJoinCommon?: () => void;
   onUserClick?: (userId: string) => void;
 }
 
@@ -124,6 +128,8 @@ export default function ChatComponent({
   isCommonMemberFetched,
   onMessagesAmountChange,
   directParent,
+  isJoinPending = false,
+  onJoinCommon,
   onUserClick,
 }: ChatComponentInterface) {
   const dispatch = useDispatch();
@@ -555,6 +561,22 @@ export default function ChatComponent({
     }
   }, [discussionMessages.length]);
 
+  const renderJoinCommonContent = (): ReactNode => {
+    if (isJoinPending) {
+      return (
+        <div className={styles.loaderWrapper}>
+          <Loader />
+        </div>
+      );
+    }
+
+    return (
+      <span className={styles.permissionsText} onClick={onJoinCommon}>
+        {directParent ? "Join the space" : "Join the effort"}
+      </span>
+    );
+  };
+
   return (
     <div className={styles.chatWrapper}>
       <div
@@ -567,6 +589,7 @@ export default function ChatComponent({
           ref={chatContentRef}
           type={type}
           commonMember={commonMember}
+          governanceCircles={governanceCircles}
           isCommonMemberFetched={isCommonMemberFetched}
           isJoiningPending={false}
           hasAccess={hasAccess}
@@ -595,9 +618,7 @@ export default function ChatComponent({
             })}
           >
             {!isChatChannel && (!commonMember || !hasAccess || isHidden) ? (
-              <span className={styles.permissionsText}>
-                Only members can send messages
-              </span>
+              renderJoinCommonContent()
             ) : (
               <>
                 <ButtonIcon

src/pages/common/components/ChatComponent/components/ChatContent/ChatContent.tsx

@@ -23,6 +23,7 @@ import {
   DirectParent,
   DiscussionMessage,
   User,
+  Circles,
 } from "@/shared/models";
 import { formatDate } from "@/shared/utils";
 import { Separator } from "./components";
@@ -36,6 +37,7 @@ export interface ChatContentRef {
 interface ChatContentInterface {
   type: ChatType;
   commonMember: CommonMember | null;
+  governanceCircles?: Circles;
   isCommonMemberFetched: boolean;
   isJoiningPending?: boolean;
   hasAccess: boolean;
@@ -70,6 +72,7 @@ const ChatContent: ForwardRefRenderFunction<
   {
     type,
     commonMember,
+    governanceCircles,
     isCommonMemberFetched,
     isJoiningPending,
     hasAccess,
@@ -259,6 +262,7 @@ const ChatContent: ForwardRefRenderFunction<
                   users={users}
                   feedItemId={feedItemId}
                   commonMember={commonMember}
+                  governanceCircles={governanceCircles}
                   onMessageDelete={onMessageDelete}
                   directParent={directParent}
                   onUserClick={onUserClick}

src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.module.scss

@@ -31,6 +31,7 @@
 .memberInfo {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   overflow: hidden;
 
   @include tablet {

src/pages/common/components/CommonMemberInfo/components/PopoverButton/PopoverButton.tsx

@@ -22,9 +22,9 @@ export const PopoverButton: FC<PopoverButtonProps> = (props) => {
       <div className={styles.contentWrapper}>
         {!isMobileVersion && <Avatar2Icon className={styles.avatarIcon} />}
         <div className={styles.memberInfo}>
-          <span className={styles.title}>
-            {pendingCircleName ? "Join circle request..." : "You are a member"}
-          </span>
+          {Boolean(pendingCircleName) && (
+            <span className={styles.title}>Join circle request...</span>
+          )}
           <span className={styles.circleNames} title={circleNames}>
             {circleNames} {pendingCircleName ? `-> ${pendingCircleName}` : ""}
           </span>

src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.module.scss

@@ -8,6 +8,8 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
   width: 100%;
   padding: 1.125rem 1.5rem;
   text-decoration: none;
@@ -50,14 +52,6 @@
   color: $light-gray-2;
 }
 
-.membersCount {
-  display: inline-flex;
-  align-items: center;
-  font-size: $xxsmall-2;
-  color: $light-gray-2;
-  margin: 0;
-}
-
 .membersCountLoader {
   height: 1rem;
   width: 1rem;

src/pages/common/components/CommonMemberInfo/components/PopoverItem/PopoverItem.tsx

@@ -141,9 +141,8 @@ export const PopoverItem: FC<CommonMemberInfoProps> = (props) => {
             [styles.disabled]: !isMember,
           })}
         >
-          {circleName}
+          {`${membersCount} ${circleName}${membersCount === 1 ? "" : "s"}`}
         </p>
-        <span className={styles.membersCount}>{membersCount} members</span>
       </div>
       <ActionButton />
     </div>

src/pages/common/components/CommonTabPanels/components/AboutTab/components/CommonEntranceInfo/CommonEntranceInfo.tsx

@@ -4,6 +4,7 @@ import { useIsTabletView } from "@/shared/hooks/viewport";
 import { Common } from "@/shared/models";
 import { MemberAdmittanceLimitations } from "@/shared/models/governance/proposals";
 import { Container } from "@/shared/ui-kit";
+import { checkIsProject } from "@/shared/utils";
 import { CommonCard } from "../../../../../CommonCard";
 import { CommonEntranceItem, CommonEntranceJoin } from "./components";
 import styles from "./CommonEntranceInfo.module.scss";
@@ -16,7 +17,7 @@ interface CommonEntranceInfoProps {
 
 const CommonEntranceInfo: FC<CommonEntranceInfoProps> = (props) => {
   const { limitations, withJoinRequest = false, common } = props;
-  const isProject = Boolean(common.directParent);
+  const isProject = checkIsProject(common);
   const isTabletView = useIsTabletView();
 
   return (