Fix payments in channels (#1439)

src/components/middle/MiddleColumn.tsx

@@ -58,6 +58,8 @@ import Button from '../ui/Button';
 import MobileSearch from './MobileSearch.async';
 import MessageSelectToolbar from './MessageSelectToolbar.async';
 import UnpinAllMessagesModal from '../common/UnpinAllMessagesModal.async';
+import PaymentModal from '../payment/PaymentModal.async';
+import ReceiptModal from '../payment/ReceiptModal.async';
 
 import './MiddleColumn.scss';
 
@@ -82,6 +84,8 @@ type StateProps = {
   isBackgroundBlurred?: boolean;
   isMobileSearchActive?: boolean;
   isSelectModeActive?: boolean;
+  isPaymentModalOpen?: boolean;
+  isReceiptModalOpen?: boolean;
   animationLevel?: number;
   shouldSkipHistoryAnimations?: boolean;
   currentTransitionKey: number;
@@ -89,7 +93,8 @@ type StateProps = {
 };
 
 type DispatchProps = Pick<GlobalActions, (
-  'openChat' | 'unpinAllMessages' | 'loadUser' | 'closeLocalTextSearch' | 'exitMessageSelectMode'
+  'openChat' | 'unpinAllMessages' | 'loadUser' | 'closeLocalTextSearch' | 'exitMessageSelectMode' |
+  'closePaymentModal' | 'clearReceipt'
 )>;
 
 const CLOSE_ANIMATION_DURATION = IS_SINGLE_COLUMN_LAYOUT ? 450 + ANIMATION_END_DELAY : undefined;
@@ -119,6 +124,8 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   isBackgroundBlurred,
   isMobileSearchActive,
   isSelectModeActive,
+  isPaymentModalOpen,
+  isReceiptModalOpen,
   animationLevel,
   shouldSkipHistoryAnimations,
   currentTransitionKey,
@@ -127,6 +134,8 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
   loadUser,
   closeLocalTextSearch,
   exitMessageSelectMode,
+  closePaymentModal,
+  clearReceipt,
 }) => {
   const { width: windowWidth } = useWindowSize();
 
@@ -386,6 +395,14 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
                       isActive={isSelectModeActive}
                       canPost={renderingCanPost}
                     />
+                    <PaymentModal
+                      isOpen={Boolean(isPaymentModalOpen)}
+                      onClose={closePaymentModal}
+                    />
+                    <ReceiptModal
+                      isOpen={Boolean(isReceiptModalOpen)}
+                      onClose={clearReceipt}
+                    />
                   </div>
                 </>
               )}
@@ -434,6 +451,8 @@ export default memo(withGlobal(
       isBackgroundBlurred,
       isMobileSearchActive: Boolean(IS_SINGLE_COLUMN_LAYOUT && selectCurrentTextSearch(global)),
       isSelectModeActive: selectIsInSelectMode(global),
+      isPaymentModalOpen: global.payment.isPaymentModalOpen,
+      isReceiptModalOpen: Boolean(global.payment.receipt),
       animationLevel: global.settings.byKey.animationLevel,
       currentTransitionKey: Math.max(0, global.messages.messageLists.length - 1),
     };
@@ -475,5 +494,6 @@ export default memo(withGlobal(
   },
   (setGlobal, actions): DispatchProps => pick(actions, [
     'openChat', 'unpinAllMessages', 'loadUser', 'closeLocalTextSearch', 'exitMessageSelectMode',
+    'closePaymentModal', 'clearReceipt',
   ]),
 )(MiddleColumn));

src/components/middle/composer/Composer.tsx

@@ -94,8 +94,6 @@ import DropArea, { DropAreaState } from './DropArea.async';
 import WebPagePreview from './WebPagePreview';
 import Portal from '../../ui/Portal';
 import CalendarModal from '../../common/CalendarModal.async';
-import PaymentModal from '../../payment/PaymentModal.async';
-import ReceiptModal from '../../payment/ReceiptModal.async';
 
 import './Composer.scss';
 
@@ -118,8 +116,6 @@ type StateProps = {
   isSelectModeActive?: boolean;
   isForwarding?: boolean;
   isPollModalOpen?: boolean;
-  isPaymentModalOpen?: boolean;
-  isReceiptModalOpen?: boolean;
   botKeyboardMessageId?: number;
   botKeyboardPlaceholder?: string;
   withScheduledButton?: boolean;
@@ -146,8 +142,8 @@ type StateProps = {
 type DispatchProps = Pick<GlobalActions, (
   'sendMessage' | 'editMessage' | 'saveDraft' | 'forwardMessages' |
   'clearDraft' | 'showDialog' | 'setStickerSearchQuery' | 'setGifSearchQuery' |
-  'openPollModal' | 'closePollModal' | 'loadScheduledHistory' | 'openChat' | 'closePaymentModal' |
+  'openPollModal' | 'closePollModal' | 'loadScheduledHistory' | 'openChat' |
-  'clearReceipt' | 'addRecentEmoji' | 'sendInlineBotResult'
+  'addRecentEmoji' | 'sendInlineBotResult'
 )>;
 
 enum MainButtonState {
@@ -187,8 +183,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
   isSelectModeActive,
   isForwarding,
   isPollModalOpen,
-  isPaymentModalOpen,
-  isReceiptModalOpen,
   botKeyboardMessageId,
   botKeyboardPlaceholder,
   withScheduledButton,
@@ -219,9 +213,7 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
   openPollModal,
   closePollModal,
   loadScheduledHistory,
-  closePaymentModal,
   openChat,
-  clearReceipt,
   addRecentEmoji,
   sendInlineBotResult,
 }) => {
@@ -820,14 +812,6 @@ const Composer: FC<OwnProps & StateProps & DispatchProps> = ({
         onClear={closePollModal}
         onSend={handlePollSend}
       />
-      <PaymentModal
-        isOpen={Boolean(isPaymentModalOpen)}
-        onClose={closePaymentModal}
-      />
-      <ReceiptModal
-        isOpen={Boolean(isReceiptModalOpen)}
-        onClose={clearReceipt}
-      />
       {renderedEditedMessage && (
         <DeleteMessageModal
           isOpen={isDeleteModalOpen}
@@ -1111,8 +1095,6 @@ export default memo(withGlobal<OwnProps>(
       usersById: global.users.byId,
       lastSyncTime: global.lastSyncTime,
       contentToBeScheduled: global.messages.contentToBeScheduled,
-      isPaymentModalOpen: global.payment.isPaymentModalOpen,
-      isReceiptModalOpen: Boolean(global.payment.receipt),
       shouldSuggestStickers: global.settings.byKey.shouldSuggestStickers,
       recentEmojis: global.recentEmojis,
       baseEmojiKeywords: baseEmojiKeywords?.keywords,
@@ -1135,8 +1117,6 @@ export default memo(withGlobal<OwnProps>(
     'forwardMessages',
     'openPollModal',
     'closePollModal',
-    'closePaymentModal',
-    'clearReceipt',
     'loadScheduledHistory',
     'openChat',
     'addRecentEmoji',