Support Join Request Dialog (#1627)

src/api/gramjs/methods/chats.ts

@@ -39,8 +39,9 @@ import {
   buildChatBannedRights,
   buildChatAdminRights,
 } from '../gramjsBuilders';
-import { addEntitiesWithPhotosToLocalDb, addMessageToLocalDb } from '../helpers';
+import { addEntitiesWithPhotosToLocalDb, addMessageToLocalDb, addPhotoToLocalDb } from '../helpers';
 import { buildApiPeerId, getApiChatIdFromMtpPeer } from '../apiBuilders/peers';
+import { buildApiPhoto } from '../apiBuilders/common';
 
 const MAX_INT_32 = 2 ** 31 - 1;
 let onUpdate: OnApiUpdate;
@@ -1005,13 +1006,24 @@ export async function openChatByInvite(hash: string) {
   let chat: ApiChat | undefined;
 
   if (result instanceof GramJs.ChatInvite) {
+    const {
+      photo, participantsCount, title, channel, requestNeeded, about,
+    } = result;
+
+    if (photo instanceof GramJs.Photo) {
+      addPhotoToLocalDb(result.photo);
+    }
+
     onUpdate({
       '@type': 'showInvite',
       data: {
-        title: result.title,
+        title,
+        about,
         hash,
-        participantsCount: result.participantsCount,
-        isChannel: result.channel,
+        participantsCount,
+        isChannel: channel,
+        isRequestNeeded: requestNeeded,
+        ...(photo instanceof GramJs.Photo && { photo: buildApiPhoto(photo) }),
       },
     });
   } else {

src/api/types/misc.ts

@@ -1,4 +1,4 @@
-import { ApiDocument } from './messages';
+import { ApiDocument, ApiPhoto } from './messages';
 
 export interface ApiInitialArgs {
   userAgent: string;
@@ -89,9 +89,12 @@ export type ApiFieldError = {
 
 export type ApiInviteInfo = {
   title: string;
+  about?: string;
   hash: string;
   isChannel?: boolean;
   participantsCount?: number;
+  isRequestNeeded?: true;
+  photo?: ApiPhoto;
 };
 
 export interface ApiCountry {

src/components/common/Avatar.tsx

@@ -2,7 +2,7 @@ import { MouseEvent as ReactMouseEvent } from 'react';
 import React, { FC, memo, useCallback } from '../../lib/teact/teact';
 
 import {
-  ApiChat, ApiMediaFormat, ApiUser, ApiUserStatus,
+  ApiChat, ApiMediaFormat, ApiPhoto, ApiUser, ApiUserStatus,
 } from '../../api/types';
 
 import { IS_TEST } from '../../config';
@@ -30,6 +30,7 @@ type OwnProps = {
   size?: 'micro' | 'tiny' | 'small' | 'medium' | 'large' | 'jumbo';
   chat?: ApiChat;
   user?: ApiUser;
+  photo?: ApiPhoto;
   userStatus?: ApiUserStatus;
   text?: string;
   isSavedMessages?: boolean;
@@ -42,6 +43,7 @@ const Avatar: FC<OwnProps> = ({
   size = 'large',
   chat,
   user,
+  photo,
   userStatus,
   text,
   isSavedMessages,
@@ -57,6 +59,8 @@ const Avatar: FC<OwnProps> = ({
       imageHash = getChatAvatarHash(user);
     } else if (chat) {
       imageHash = getChatAvatarHash(chat);
+    } else if (photo) {
+      imageHash = `photo${photo.id}?size=m`;
     }
   }
 

src/components/main/Dialogs.tsx

@@ -1,7 +1,7 @@
 import React, { FC, memo } from '../../lib/teact/teact';
 import { getDispatch, withGlobal } from '../../lib/teact/teactn';
 
-import { ApiError, ApiInviteInfo } from '../../api/types';
+import { ApiError, ApiInviteInfo, ApiPhoto } from '../../api/types';
 
 import getReadableErrorText from '../../util/getReadableErrorText';
 import { pick } from '../../util/iteratees';
@@ -10,6 +10,7 @@ import renderText from '../common/helpers/renderText';
 
 import Modal from '../ui/Modal';
 import Button from '../ui/Button';
+import Avatar from '../common/Avatar';
 
 import './Dialogs.scss';
 
@@ -26,9 +27,23 @@ const Dialogs: FC<StateProps> = ({ dialogs }) => {
     return undefined;
   }
 
+  function renderInviteHeader(title: string, photo?: ApiPhoto) {
+    return (
+      <div className="modal-header">
+        {photo && <Avatar size="small" photo={photo} />}
+        <div className="modal-title">
+          {renderText(title)}
+        </div>
+        <Button round color="translucent" size="smaller" ariaLabel={lang('Close')} onClick={dismissDialog}>
+          <i className="icon-close" />
+        </Button>
+      </div>
+    );
+  }
+
   const renderInvite = (invite: ApiInviteInfo) => {
     const {
-      hash, title, participantsCount, isChannel,
+      hash, title, about, participantsCount, isChannel, photo, isRequestNeeded,
     } = invite;
 
     const handleJoinClick = () => {
@@ -43,16 +58,28 @@ const Dialogs: FC<StateProps> = ({ dialogs }) => {
       : lang('Members', participantsCount, 'i');
 
     const joinText = isChannel ? lang('ChannelJoin') : lang('JoinGroup');
+    const requestToJoinText = isChannel
+      ? lang('MemberRequests.RequestToJoinChannel') : lang('MemberRequests.RequestToJoinGroup');
 
     return (
       <Modal
         isOpen
         onClose={dismissDialog}
         className="error"
-        title={title}
+        header={renderInviteHeader(title, photo)}
       >
+        {about && <p className="modal-about">{renderText(about)}</p>}
         {participantsCount !== undefined && <p>{participantsText}</p>}
-        <Button isText className="confirm-dialog-button" onClick={handleJoinClick}>{joinText}</Button>
+        {isRequestNeeded && (
+          <p className="modal-help">
+            {isChannel
+              ? lang('MemberRequests.RequestToJoinDescriptionChannel')
+              : lang('MemberRequests.RequestToJoinDescriptionGroup')}
+          </p>
+        )}
+        <Button isText className="confirm-dialog-button" onClick={handleJoinClick}>
+          {isRequestNeeded ? requestToJoinText : joinText}
+        </Button>
         <Button isText className="confirm-dialog-button" onClick={dismissDialog}>{lang('Cancel')}</Button>
       </Modal>
     );

src/components/ui/Modal.scss

@@ -139,6 +139,16 @@
     text-align: initial;
   }
 
+  .modal-about {
+    font-weight: bold;
+  }
+
+  .modal-help {
+    color: var(--color-text-secondary);
+    font-size: 0.9375rem;
+    line-height: 1.3;
+  }
+
   .dialog-buttons {
     display: flex;
     align-items: flex-end;