Premium Limit Reached Modal: Fix description for cloud folders (#3322)

src/components/left/main/ChatFolders.tsx

@@ -45,6 +45,7 @@ type StateProps = {
   currentUserId?: string;
   shouldSkipHistoryAnimations?: boolean;
   maxFolders: number;
+  maxChatLists: number;
   maxFolderInvites: number;
   hasArchivedChats?: boolean;
   archiveSettings: GlobalState['archiveSettings'];
@@ -64,6 +65,7 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
   isForumPanelOpen,
   shouldSkipHistoryAnimations,
   maxFolders,
+  maxChatLists,
   shouldHideFolderTabs,
   folderInvitesById,
   maxFolderInvites,
@@ -134,16 +136,25 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
           title: lang('ChatList.ContextMenuShare'),
           icon: 'link',
           handler: () => {
+            const chatListCount = Object.values(chatFoldersById).reduce((acc, el) => acc + (el.isChatList ? 1 : 0), 0);
+            if (chatListCount >= maxChatLists && !folder.isChatList) {
+              openLimitReachedModal({
+                limit: 'chatlistJoined',
+              });
+              return;
+            }
+
             // Greater amount can be after premium downgrade
             if (folderInvitesById[id]?.length >= maxFolderInvites) {
               openLimitReachedModal({
                 limit: 'chatlistInvites',
               });
-            } else {
-              openShareChatFolderModal({
-                folderId: id,
-              });
+              return;
             }
+
+            openShareChatFolderModal({
+              folderId: id,
+            });
           },
         });
       }
@@ -176,7 +187,10 @@ const ChatFolders: FC<OwnProps & StateProps> = ({
         contextActions: contextActions?.length ? contextActions : undefined,
       } satisfies TabWithProperties;
     });
-  }, [displayedFolders, folderCountersById, lang, maxFolders, folderInvitesById, maxFolderInvites]);
+  }, [
+    displayedFolders, maxFolders, folderCountersById, lang, chatFoldersById, maxChatLists, folderInvitesById,
+    maxFolderInvites,
+  ]);
 
   const handleSwitchTab = useLastCallback((index: number) => {
     setActiveChatFolder({ activeChatFolder: index }, { forceOnHeavyAnimation: true });
@@ -340,6 +354,7 @@ export default memo(withGlobal<OwnProps>(
       hasArchivedChats: Boolean(archived?.length),
       maxFolders: selectCurrentLimit(global, 'dialogFilters'),
       maxFolderInvites: selectCurrentLimit(global, 'chatlistInvites'),
+      maxChatLists: selectCurrentLimit(global, 'chatlistJoined'),
       archiveSettings,
     };
   },

src/components/left/settings/folders/SettingsFoldersEdit.tsx

@@ -54,6 +54,8 @@ type StateProps = {
   invites?: ApiChatlistExportedInvite[];
   isRemoved?: boolean;
   maxInviteLinks: number;
+  maxChatLists: number;
+  chatListCount: number;
 };
 
 const SUBMIT_TIMEOUT = 500;
@@ -79,6 +81,8 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
   loadedArchivedChatIds,
   invites,
   maxInviteLinks,
+  maxChatLists,
+  chatListCount,
   onSaveFolder,
 }) => {
   const {
@@ -178,19 +182,28 @@ const SettingsFoldersEdit: FC<OwnProps & StateProps> = ({
       return;
     }
 
+    if (chatListCount >= maxChatLists && !state.folder.isChatList) {
+      openLimitReachedModal({
+        limit: 'chatlistJoined',
+      });
+      return;
+    }
+
     if (invites.length < maxInviteLinks) {
       if (state.isTouched) {
         onSaveFolder(onShareFolder);
       } else {
         onShareFolder();
       }
-    } else {
-      openLimitReachedModal({
-        limit: 'chatlistInvites',
-      });
+      return;
     }
+
+    openLimitReachedModal({
+      limit: 'chatlistInvites',
+    });
   }, [
-    invites, state.folderId, state.isTouched, maxInviteLinks, isCreating, onSaveFolder, onShareFolder, lang,
+    invites, state.folderId, state.isTouched, chatListCount, maxInviteLinks, isCreating, onSaveFolder,
+    onShareFolder, lang, maxChatLists, state.folder.isChatList,
   ]);
 
   const handleEditInviteClick = useCallback((e: React.MouseEvent<HTMLElement>, url: string) => {
@@ -378,6 +391,7 @@ export default memo(withGlobal<OwnProps>(
   (global, { state }): StateProps => {
     const { listIds } = global.chats;
     const { byId, invites } = global.chatFolders;
+    const chatListCount = Object.values(byId).reduce((acc, el) => acc + (el.isChatList ? 1 : 0), 0);
 
     return {
       loadedActiveChatIds: listIds.active,
@@ -385,6 +399,8 @@ export default memo(withGlobal<OwnProps>(
       invites: state.folderId ? (invites[state.folderId] || MEMO_EMPTY_ARRAY) : undefined,
       isRemoved: state.folderId !== undefined && !byId[state.folderId],
       maxInviteLinks: selectCurrentLimit(global, 'chatlistInvites'),
+      maxChatLists: selectCurrentLimit(global, 'chatlistJoined'),
+      chatListCount,
     };
   },
 )(SettingsFoldersEdit));

src/components/main/premium/common/PremiumLimitReachedModal.tsx

@@ -201,7 +201,6 @@ const PremiumLimitReachedModal: FC<OwnProps & StateProps> = ({
           color="primary"
         >
           {lang('IncreaseLimit')}
-          <i className={buildClassName(styles.buttonIcon, 'icon', 'icon-double-badge')} />
         </Button>
       )}
       </div>