feat(CommunityPemissions): Added chat input post rights panel

Closes #9436

storybook/PagesModel.qml

@@ -161,6 +161,10 @@ ListModel {
         title: "FeesPanel"
         section: "Panels"
     }
+    ListElement {
+        title: "ChatPermissionQualificationPanel"
+        section: "Panels"
+    }
     ListElement {
          title: "BurnTokensPopup"
          section: "Popups"

storybook/figma.json

@@ -75,6 +75,9 @@
     "CommunityPermissionsView": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=22813%3A497277&t=7gqqAFbdG5KrPOmn-0"
     ],
+    "ChatPermissionQualificationPanel": [
+        "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2698%3A375926&t=iIeFeGOBx5BbbYJa-0"
+    ],
     "CommunityProfilePopupInviteFriendsPanel": [
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2927%3A343592",
         "https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=2990%3A353179",

storybook/pages/ChatPermissionQualificationPanelPage.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import Models 1.0
+import Storybook 1.0
+
+import utils 1.0
+import AppLayouts.Chat.popups.community 1.0
+import AppLayouts.Chat.panels.communities 1.0
+
+SplitView {
+    id: root
+
+    Logs { id: logs }
+
+    Item {
+        SplitView.fillWidth: true
+        SplitView.fillHeight: true
+        ChatPermissionQualificationPanel {
+            anchors.centerIn: parent
+            width: 500
+            height: 40
+            holdingsModel: PermissionsModel.longPermissionsModel
+            assetsModel: AssetsModel {}
+            collectiblesModel: CollectiblesModel {}
+        }
+    }
+
+    LogsAndControlsPanel {
+        id: logsAndControlsPanel
+
+        SplitView.minimumHeight: 100
+        SplitView.preferredHeight: 200
+
+        logsView.logText: logs.logText
+    }
+}

ui/app/AppLayouts/Chat/panels/communities/ChatPermissionQualificationPanel.qml

@@ -0,0 +1,89 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import utils 1.0
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+
+import AppLayouts.Chat.views.communities 1.0
+
+Item {
+    id: root
+
+    property var holdingsModel
+    property var assetsModel
+    property var collectiblesModel
+
+    QtObject {
+        id: d
+        property int panelRowSpacing: 4 // by design
+    }
+
+    RowLayout {
+        anchors.fill: parent
+        spacing: d.panelRowSpacing
+        StatusBaseText {
+            text: qsTr("To post, hold")
+            font.pixelSize: Style.current.primaryTextFontSize
+            color: Style.current.secondaryText
+        }
+
+        StatusScrollView {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 20
+            contentWidth: tokenRow.implicitWidth
+            padding: 0
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            Row {
+                id: tokenRow
+                Repeater {
+                    id: repeater
+                    model: root.holdingsModel
+                    Row {
+                        spacing: d.panelRowSpacing
+                        Row {
+                            spacing: d.panelRowSpacing
+                            Repeater {
+                                model: HoldingsSelectionModel {
+                                    sourceModel: holdingsListModel
+                                    assetsModel: root.assetsModel
+                                    collectiblesModel: root.collectiblesModel
+                                }
+                                StatusListItemTag {
+                                    height: 20
+                                    enabled: false
+                                    leftPadding: 2
+                                    title: model.text
+                                    asset.name: model.imageSource
+                                    asset.isImage: true
+                                    asset.bgColor: "transparent"
+                                    asset.height: 16
+                                    asset.width: asset.height
+                                    asset.bgWidth: asset.height
+                                    asset.bgHeight: asset.height
+                                    asset.color: asset.isImage ? "transparent" : titleText.color
+                                    closeButtonVisible: false
+                                    titleText.color: model.available ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
+                                    bgColor: model.available ? Theme.palette.primaryColor2 :Theme.palette.dangerColor2
+                                    titleText.font.pixelSize: 12
+                                }
+                            }
+                        }
+                        StatusBaseText {
+                            height: parent.height
+                            visible: (index !== (repeater.count - 1))
+                            verticalAlignment: Text.AlignVCenter
+                            font.pixelSize: Style.current.primaryTextFontSize
+                            rightPadding: d.panelRowSpacing
+                            color: Style.current.secondaryText
+                            text: qsTr("or")
+                        }
+                    }
+                }
+            }
+        }
+        Item { Layout.fillWidth: true }
+    }
+}

ui/app/AppLayouts/Chat/panels/communities/qmldir

@@ -15,3 +15,4 @@ SortableTokenHoldersPanel 1.0 SortableTokenHoldersPanel.qml
 TokenHoldersPanel 1.0 TokenHoldersPanel.qml
 TokenHoldersProxyModel 1.0 TokenHoldersProxyModel.qml
 WarningPanel 1.0 WarningPanel.qml
+ChatPermissionQualificationPanel 1.0 ChatPermissionQualificationPanel.qml

ui/app/AppLayouts/Chat/views/ChatColumnView.qml

@@ -6,6 +6,7 @@ import QtQml 2.15
 import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
+import StatusQ.Core.Utils 0.1
 
 import utils 1.0
 import shared 1.0
@@ -13,6 +14,9 @@ import shared.popups 1.0
 import shared.status 1.0
 import shared.controls 1.0
 import shared.views.chat 1.0
+import SortFilterProxyModel 0.2
+
+import AppLayouts.Chat.popups.community 1.0
 
 import "../helpers"
 import "../controls"
@@ -20,6 +24,7 @@ import "../popups"
 import "../panels"
 import "../../Wallet"
 import "../stores"
+import "../panels/communities"
 
 Item {
     id: root
@@ -38,6 +43,8 @@ Item {
     property int chatsCount: parentModule && parentModule.model ? parentModule.model.count : 0
     property int activeChatType: parentModule && parentModule.activeItem.type
     property bool stickersLoaded: false
+    property bool viewAndPostPermissionsSatisfied: true
+    property var viewAndPostPermissionsModel
 
     readonly property var contactDetails: rootStore ? rootStore.oneToOneChatContact : null
     readonly property bool isUserAdded: !!root.contactDetails && root.contactDetails.isAdded
@@ -50,8 +57,8 @@ Item {
         parentModule.prepareChatContentModuleForChatId(activeChatId)
         let chatContentModule = parentModule.getChatContentModule()
         chatContentModule.inputAreaModule.requestAddress(address,
-                                                    amount,
+                                                         amount,
-                                                    tokenAddress)
+                                                         tokenAddress)
     }
     function requestTransaction(address, amount, tokenAddress, tokenDecimals = 18) {
         amount = globalUtils.eth2Wei(amount.toString(), tokenDecimals)
@@ -60,8 +67,8 @@ Item {
         parentModule.prepareChatContentModuleForChatId(activeChatId)
         let chatContentModule = parentModule.getChatContentModule()
         chatContentModule.inputAreaModule.request(address,
-                                                    amount,
+                                                  amount,
-                                                    tokenAddress)
+                                                  tokenAddress)
     }
 
     // This function is called once `1:1` or `group` chat is created.
@@ -101,7 +108,6 @@ Item {
 
     QtObject {
         id: d
-
         readonly property var activeChatContentModule: d.getChatContentModule(root.activeChatId)
 
         readonly property UsersStore activeUsersStore: UsersStore {
@@ -216,8 +222,8 @@ Item {
                         root.openStickerPackPopup(stickerPackId)
                     }
                     onShowReplyArea: (messageId) => {
-                        d.showReplyArea(messageId)
+                                         d.showReplyArea(messageId)
-                    }
+                                     }
                     onForceInputFocus: {
                         chatInput.forceInputActiveFocus()
                     }
@@ -234,102 +240,126 @@ Item {
         RowLayout {
             Layout.fillWidth: true
             Layout.margins: Style.current.smallPadding
+            Layout.preferredHeight: chatInputItem.height
 
-            StatusChatInput {
+            Item {
-                id: chatInput
+                id: chatInputItem
-
                 Layout.fillWidth: true
-                visible: !!d.activeChatContentModule
+                Layout.preferredHeight: chatInput.height
 
-                enabled: !!d.activeChatContentModule
+                StatusChatInput {
-                         && !d.activeChatContentModule.chatDetails.blocked
+                    id: chatInput
-                         && root.rootStore.sectionDetails.joined
+                    width: parent.width
-                         && !root.rootStore.sectionDetails.amIBanned
+                    visible: !!d.activeChatContentModule
-                         && root.rootStore.isUserAllowedToSendMessage
 
-                store: root.rootStore
+                    enabled: !!d.activeChatContentModule
-                usersStore: d.activeUsersStore
+                             && !d.activeChatContentModule.chatDetails.blocked
+                             && root.rootStore.sectionDetails.joined
+                             && !root.rootStore.sectionDetails.amIBanned
+                             && root.rootStore.isUserAllowedToSendMessage
+                             && !channelPostRestrictions.visible
+                             && root.viewAndPostPermissionsSatisfied
 
-                textInput.placeholderText: {
+                    store: root.rootStore
-                    if (!d.activeChatContentModule)
+                    usersStore: d.activeUsersStore
-                        return
-                    if (d.activeChatContentModule.chatDetails.blocked)
-                        return qsTr("This user has been blocked.")
-                    if (!root.rootStore.sectionDetails.joined || root.rootStore.sectionDetails.amIBanned)
-                        return qsTr("You need to join this community to send messages")
-                    return root.rootStore.chatInputPlaceHolderText
-                }
 
-                emojiPopup: root.emojiPopup
+                    textInput.placeholderText: {
-                stickersPopup: root.stickersPopup
+                        if (!channelPostRestrictions.visible) {
-                chatType: root.activeChatType
+                            if (d.activeChatContentModule.chatDetails.blocked)
-                suggestions.suggestionFilter.addSystemSuggestions: chatType === Constants.chatType.communityChat
+                                return qsTr("This user has been blocked.")
-
+                            if (!root.rootStore.sectionDetails.joined || root.rootStore.sectionDetails.amIBanned)
-                textInput.onTextChanged: {
+                                return qsTr("You need to join this community to send messages")
-                    if (!!d.activeChatContentModule)
+                            if (!root.viewAndPostPermissionsSatisfied) {
-                        d.activeChatContentModule.inputAreaModule.preservedProperties.text = textInput.text
+                                return qsTr("Sorry, you don't have the tokens needed to post in this channel.")
-                }
+                            }
-
+                            return root.rootStore.chatInputPlaceHolderText
-                onReplyMessageIdChanged: {
+                        } else {
-                    if (!!d.activeChatContentModule)
+                            return "";
-                        d.activeChatContentModule.inputAreaModule.preservedProperties.replyMessageId = replyMessageId
+                        }
-                }
-
-                onFileUrlsAndSourcesChanged: {
-                    if (!!d.activeChatContentModule)
-                        d.activeChatContentModule.inputAreaModule.preservedProperties.fileUrlsAndSourcesJson = JSON.stringify(chatInput.fileUrlsAndSources)
-                }
-
-                onSendTransactionCommandButtonClicked: {
-                    if (!d.activeChatContentModule) {
-                        console.warn("error on sending transaction command - chat content module is not set")
-                        return
                     }
 
-                    if (Utils.isEnsVerified(d.activeChatContentModule.getMyChatId())) {
+                    emojiPopup: root.emojiPopup
-                        Global.openPopup(cmpSendTransactionWithEns)
+                    stickersPopup: root.stickersPopup
-                    } else {
+                    chatType: root.activeChatType
-                        Global.openPopup(cmpSendTransactionNoEns)
+                    suggestions.suggestionFilter.addSystemSuggestions: chatType === Constants.chatType.communityChat
+
+                    textInput.onTextChanged: {
+                        if (!!d.activeChatContentModule)
+                            d.activeChatContentModule.inputAreaModule.preservedProperties.text = textInput.text
                     }
-                }
 
-                onReceiveTransactionCommandButtonClicked: {
+                    onReplyMessageIdChanged: {
-                    Global.openPopup(cmpReceiveTransaction)
+                        if (!!d.activeChatContentModule)
-                }
+                            d.activeChatContentModule.inputAreaModule.preservedProperties.replyMessageId = replyMessageId
+                    }
 
-                onStickerSelected: {
+                    onFileUrlsAndSourcesChanged: {
-                    if (!!d.activeChatContentModule)
+                        if (!!d.activeChatContentModule)
+                            d.activeChatContentModule.inputAreaModule.preservedProperties.fileUrlsAndSourcesJson = JSON.stringify(chatInput.fileUrlsAndSources)
+                    }
+
+                    onSendTransactionCommandButtonClicked: {
+                        if (!d.activeChatContentModule) {
+                            console.warn("error on sending transaction command - chat content module is not set")
+                            return
+                        }
+
+                        if (Utils.isEnsVerified(d.activeChatContentModule.getMyChatId())) {
+                            Global.openPopup(cmpSendTransactionWithEns)
+                        } else {
+                            Global.openPopup(cmpSendTransactionNoEns)
+                        }
+                    }
+
+                    onReceiveTransactionCommandButtonClicked: {
+                        Global.openPopup(cmpReceiveTransaction)
+                    }
+
+                    onStickerSelected: {
                         root.rootStore.sendSticker(d.activeChatContentModule.getMyChatId(),
-                                                          hashId,
+                                                   hashId,
-                                                          chatInput.isReply ? chatInput.replyMessageId : "",
+                                                   chatInput.isReply ? chatInput.replyMessageId : "",
-                                                          packId,
+                                                   packId,
-                                                          url)
+                                                   url)
-                }
-
-
-                onSendMessage: {
-                    if (!d.activeChatContentModule) {
-                        console.debug("error on sending message - chat content module is not set")
-                        return
                     }
 
-                    if (root.rootStore.sendMessage(d.activeChatContentModule.getMyChatId(),
+                    onSendMessage: {
-                                                  event,
+                        if (!d.activeChatContentModule) {
-                                                  chatInput.getTextWithPublicKeys(),
+                            console.debug("error on sending message - chat content module is not set")
-                                                  chatInput.isReply? chatInput.replyMessageId : "",
+                            return
-                                                  chatInput.fileUrlsAndSources
+                        }
-                                                  ))
-                    {
-                        Global.playSendMessageSound()
 
-                        chatInput.textInput.clear();
+                        if (root.rootStore.sendMessage(d.activeChatContentModule.getMyChatId(),
-                        chatInput.textInput.textFormat = TextEdit.PlainText;
+                                                       event,
-                        chatInput.textInput.textFormat = TextEdit.RichText;
+                                                       chatInput.getTextWithPublicKeys(),
+                                                       chatInput.isReply? chatInput.replyMessageId : "",
+                                                       chatInput.fileUrlsAndSources
+                                                       ))
+                        {
+                            Global.playSendMessageSound()
+
+                            chatInput.textInput.clear();
+                            chatInput.textInput.textFormat = TextEdit.PlainText;
+                            chatInput.textInput.textFormat = TextEdit.RichText;
+                        }
+                    }
+
+                    onKeyUpPress: {
+                        d.activeMessagesStore.setEditModeOnLastMessage(root.rootStore.userProfileInst.pubKey)
                     }
                 }
 
-                onKeyUpPress: {
+                ChatPermissionQualificationPanel {
-                    d.activeMessagesStore.setEditModeOnLastMessage(root.rootStore.userProfileInst.pubKey)
+                    id: channelPostRestrictions
+                    width: chatInput.textInput.width
+                    height: chatInput.textInput.height
+                    anchors.left: parent.left
+                    anchors.leftMargin: (2*Style.current.bigPadding)
+                    visible: (!!root.viewAndPostPermissionsModel && (root.viewAndPostPermissionsModel.count > 0)
+                              && !root.amISectionAdmin)
+                    assetsModel: root.rootStore.assetsModel
+                    collectiblesModel: root.rootStore.collectiblesModel
+                    holdingsModel: root.viewAndPostHoldingsModel
                 }
             }
 
@@ -348,7 +378,6 @@ Item {
         }
     }
 
-
     Component {
         id: cmpSendTransactionNoEns
         ChatCommandModal {