feat(JoinCommunity): Created join permission overlay panel

Created needed components to display permission requirements to join a community.

Part of #9267

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

@@ -0,0 +1,96 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+import AppLayouts.Chat.helpers 1.0
+import AppLayouts.Chat.controls.community 1.0
+
+import SortFilterProxyModel 0.2
+
+import utils 1.0
+
+Control {
+    id: root
+
+    property var model
+    property string introText
+
+    QtObject {
+        id: d
+
+        // By design values:
+        readonly property int defaultHoldingsSpacing: 8
+
+        function holdingsTextFormat(name, amount) {
+            return CommunityPermissionsHelpers.setHoldingsTextFormat(HoldingTypes.Type.Asset, name, amount)
+        }
+    }
+
+    contentItem: ColumnLayout {
+        spacing: root.spacing
+
+        StatusBaseText {
+            Layout.fillWidth: true
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+            text: root.introText
+            textFormat: Text.StyledText
+        }
+
+        ColumnLayout {
+            Layout.alignment: Qt.AlignHCenter
+            spacing: d.defaultHoldingsSpacing
+
+            Repeater {
+                model: root.model
+
+                ColumnLayout {
+                    Layout.alignment: Qt.AlignHCenter
+                    spacing: d.defaultHoldingsSpacing
+
+                    RowLayout {
+                        spacing: 18 // by design
+
+                        Repeater {
+                            model: SortFilterProxyModel {
+                                sourceModel: holdingsListModel
+                                proxyRoles: ExpressionRole {
+                                    name: "text"
+                                    // Direct call for singleton function is not handled properly by SortFilterProxyModel that's why `holdingsTextFormat` is used instead.
+                                    expression: d.holdingsTextFormat(model.name, model.amount)
+                                }
+                            }
+
+                            StatusListItemTag {
+                                enabled: false
+                                leftPadding: 2
+                                title: text
+                                asset.name: model.imageSource
+                                asset.isImage: true
+                                asset.bgColor: "transparent"
+                                asset.height: 28
+                                asset.width: asset.height
+                                closeButtonVisible: false
+                                titleText.color: model.available ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
+                                bgColor: model.available ? Theme.palette.primaryColor2 :Theme.palette.dangerColor2
+                                titleText.font.pixelSize: 15
+                            }
+                        }
+                    }
+
+                    StatusBaseText {
+                        Layout.alignment: Qt.AlignHCenter
+                        text: qsTr("or")
+                        textFormat: Text.StyledText
+                        visible: (index !== root.model.count - 1)
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,115 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
+import AppLayouts.Chat.helpers 1.0
+import AppLayouts.Chat.controls.community 1.0
+
+import SortFilterProxyModel 0.2
+
+
+Control {
+    id: root
+
+    property bool joinCommunity: true // Otherwise it means join channel action
+    property bool requirementsMet: false
+    property bool requiresRequest: false
+    property bool isInvitationPending: false
+    property bool isJoinRequestRejected: false
+    property string communityName
+    property var communityHoldings
+    property string channelName
+    property var viewOnlyHoldings
+    property var viewAndPostHoldings
+    property var moderateHoldings
+
+    signal revealAddressClicked
+    signal invitationPendingClicked
+
+    QtObject {
+        id: d
+
+        readonly property string communityRequirementsNotMetText: qsTr("Membership requirements not met")
+        readonly property string communityRevealAddressText: qsTr("Reveal your address to join")
+        readonly property string communityRevealAddressWithRequestText: qsTr("Reveal your address and request to join")
+        readonly property string communityMembershipRequestPendingText: qsTr("Membership Request Pending...")
+        readonly property string channelRequirementsNotMetText: qsTr("Channel requirements not met")
+        readonly property string channelRevealAddressText: qsTr("Reveal your address to enter")
+        readonly property string channelMembershipRequestPendingText: qsTr("Channel Membership Request Pending...")
+        readonly property string memberchipRequestRejectedText: qsTr("Membership Request Rejected")
+
+        function holdingsTextFormat(name, amount) {
+            return CommunityPermissionsHelpers.setHoldingsTextFormat(HoldingTypes.Type.Asset, name, amount)
+        }
+
+        function getInvitationPendingText() {
+            return root.joinCommunity ? d.communityMembershipRequestPendingText : d.channelMembershipRequestPendingText
+        }
+
+        function getRevealAddressText() {
+            return root.joinCommunity ? (root.requiresRequest ? d.communityRevealAddressWithRequestText : d.communityRevealAddressText) : d.channelRevealAddressText
+        }
+    }
+
+    padding: 35 // default by design
+    spacing: 32 // default by design
+    contentItem: ColumnLayout {
+        id: column
+        spacing: root.spacing
+
+        HoldingsListPanel {
+            Layout.fillWidth: true
+            spacing: root.spacing
+            visible: root.joinCommunity && root.communityHoldings
+            introText: qsTr("To join <b>%1</b> you need to prove that you hold").arg(root.communityName)
+            model: root.communityHoldings
+        }
+
+        HoldingsListPanel {
+            Layout.fillWidth: true
+            spacing: root.spacing
+            visible: !root.joinCommunity && !!root.viewOnlyHoldings
+            introText: qsTr("To only view the <b>%1</b> channel you need to hold").arg(root.channelName)
+            model: root.viewOnlyHoldings
+        }
+
+        HoldingsListPanel {
+            Layout.fillWidth: true
+            spacing: root.spacing
+            visible: !root.joinCommunity && !!root.viewAndPostHoldings
+            introText: qsTr("To view and post in the <b>%1</b> channel you need to hold").arg(root.channelName)
+            model: root.viewAndPostHoldings
+        }
+
+        HoldingsListPanel {
+            Layout.fillWidth: true
+            spacing: root.spacing
+            visible: !root.joinCommunity && !!root.moderateHoldings
+            introText: qsTr("To moderate in the <b>%1</b> channel you need to hold").arg(root.channelName)
+            model: root.moderateHoldings
+        }
+
+        StatusButton {
+            Layout.alignment: Qt.AlignHCenter
+            visible: !root.isJoinRequestRejected
+            text: root.isInvitationPending ? d.getInvitationPendingText() : d.getRevealAddressText()
+            font.pixelSize: 13
+            enabled: root.requirementsMet
+            onClicked: root.isInvitationPending ? root.invitationPendingClicked() : root.revealAddressClicked()
+        }
+
+        StatusBaseText {
+            Layout.alignment: Qt.AlignHCenter
+            visible: root.isJoinRequestRejected || !root.requirementsMet
+            text: root.isJoinRequestRejected ? d.memberchipRequestRejectedText :
+                                          (root.joinCommunity ? d.communityRequirementsNotMetText : d.channelRequirementsNotMetText)
+            color: Theme.palette.dangerColor1
+        }
+    }
+}
+

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

@@ -4,3 +4,4 @@ CommunityProfilePopupInviteMessagePanel 1.0 CommunityProfilePopupInviteMessagePa
 PermissionQualificationPanel 1.0 PermissionQualificationPanel.qml
 PermissionConflictWarningPanel 1.0 PermissionConflictWarningPanel.qml
 CommunityColumnHeaderPanel 1.0 CommunityColumnHeaderPanel.qml
+JoinPermissionsOverlayPanel 1.0 JoinPermissionsOverlayPanel.qml