fix(CancelCommunityMembership): Added popup instead of directly cancelling request

- Added dialog instead of calling directly to the cancel method.
- Updated `Cancel` button format according to figma in `CommunityMembershipSetupDialog`.

Closes #14097

ui/app/AppLayouts/Chat/ChatLayout.qml

@@ -128,8 +128,14 @@ StackLayout {
                 })
             }
             onInvitationPendingClicked: {
-                root.rootStore.cancelPendingRequest(communityId)
+                Global.openPopup(communityMembershipSetupDialogComponent, {
-                joinCommunityView.isInvitationPending = root.rootStore.isMyCommunityRequestPending(communityId)
+                                     communityId: joinCommunityView.communityId,
+                                     isInvitationPending: joinCommunityView.isInvitationPending,
+                                     communityName: communityData.name,
+                                     introMessage: communityData.introMessage,
+                                     communityIcon: communityData.image,
+                                     accessType: communityData.access
+                                 })
             }
 
             Connections {
@@ -196,8 +202,14 @@ StackLayout {
                 })
             }
             onInvitationPendingClicked: {
-                root.rootStore.cancelPendingRequest(chatView.communityId)
+                Global.openPopup(communityMembershipSetupDialogComponent, {
-                chatView.isInvitationPending = root.rootStore.isMyCommunityRequestPending(chatView.communityId)
+                    communityId: chatView.communityId,
+                    isInvitationPending: root.rootStore.isMyCommunityRequestPending(chatView.communityId),
+                    communityName: root.sectionItemModel.name,
+                    introMessage: root.sectionItemModel.introMessage,
+                    communityIcon: root.sectionItemModel.image,
+                    accessType: root.sectionItemModel.access
+                })
             }
         }
     }

ui/imports/shared/popups/CommunityMembershipSetupDialog.qml

@@ -76,50 +76,7 @@ StatusStackModal {
 
     rightButtons: [d.shareButton, finishButton]
 
-    finishButton: StatusButton {
+    finishButton: root.isInvitationPending ? d.cancelRequestButton : d.shareAddressesButton
-        text: {
-            if (root.isInvitationPending) {
-                  return qsTr("Cancel Membership Request")
-            } else if (root.accessType === Constants.communityChatOnRequestAccess) {
-                if (d.selectedSharedAddressesCount === d.totalNumOfAddressesForSharing) {
-                    return qsTr("Share all addresses to join")
-                }
-                return qsTr("Share %n address(s) to join", "", d.selectedSharedAddressesCount)
-            }
-            return qsTr("Join %1").arg(root.communityName)
-        }
-        type: root.isInvitationPending ? StatusBaseButton.Type.Danger
-                                       : StatusBaseButton.Type.Normal
-
-        icon.name: {
-            if (root.profileProvesOwnershipOfSelectedAddresses) {
-                if (userProfile.usingBiometricLogin) {
-                    return "touch-id"
-                }
-
-                if (userProfile.isKeycardUser) {
-                    return "keycard"
-                }
-
-                return "password"
-            }
-            if (root.allAddressesToRevealBelongToSingleNonProfileKeypair) {
-                return "keycard"
-            }
-
-            return ""
-        }
-
-        onClicked: {
-            if (root.isInvitationPending) {
-                root.cancelMembershipRequest()
-                root.close()
-                return
-            }
-
-            d.proceedToSigningOrSubmitRequest(d.communityIntroUid)
-        }
-    }
 
     backButton: StatusBackButton {
         visible: !!root.replaceLoader.item
@@ -180,6 +137,52 @@ StatusStackModal {
             ]
         }
 
+        readonly property StatusFlatButton cancelRequestButton: StatusFlatButton {
+            text: qsTr("Cancel Membership Request")
+            type: StatusBaseButton.Type.Danger
+            onClicked: {
+                if (root.isInvitationPending) {
+                    root.cancelMembershipRequest()
+                    root.close()
+                    return
+                }
+            }
+        }
+
+        readonly property StatusButton shareAddressesButton: StatusButton {
+            text: {
+                if (root.accessType === Constants.communityChatOnRequestAccess) {
+                    if (d.selectedSharedAddressesCount === d.totalNumOfAddressesForSharing) {
+                        return qsTr("Share all addresses to join")
+                    }
+                    return qsTr("Share %n address(s) to join", "", d.selectedSharedAddressesCount)
+                }
+                return qsTr("Join %1").arg(root.communityName)
+            }
+            type: StatusBaseButton.Type.Normal
+            icon.name: {
+                if (root.profileProvesOwnershipOfSelectedAddresses) {
+                    if (userProfile.usingBiometricLogin) {
+                        return "touch-id"
+                    }
+
+                    if (userProfile.isKeycardUser) {
+                        return "keycard"
+                    }
+
+                    return "password"
+                }
+
+                if (root.allAddressesToRevealBelongToSingleNonProfileKeypair) {
+                    return "keycard"
+                }
+
+                return ""
+            }
+
+            onClicked: d.proceedToSigningOrSubmitRequest(d.communityIntroUid)
+        }
+
         function proceedToSigningOrSubmitRequest(uidOfComponentThisFunctionIsCalledFrom) {
             const selected = d.getSelectedAddresses()
             root.prepareForSigning(selected.airdropAddress, selected.addresses)
@@ -405,7 +408,7 @@ StatusStackModal {
 
     stackItems: [
         StatusScrollView {
-           id: scrollView
+            id: scrollView
             contentWidth: availableWidth
 
             ColumnLayout {
@@ -417,7 +420,7 @@ StatusStackModal {
                     Layout.preferredWidth: 64
                     Layout.preferredHeight: Layout.preferredWidth
                     visible: ((image.status == Image.Loading) ||
-                             (image.status == Image.Ready)) &&
+                              (image.status == Image.Ready)) &&
                              !image.isError
                     image.source: root.communityIcon
                 }