From 7ef27f86226502901c8819c0ea018cdb45e29edf Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 28 Nov 2024 15:10:59 +0000
Subject: [PATCH 1/6] Add more filters for admin notification targetting

---
 forge/db/models/User.js                       |  29 +++-
 forge/routes/api/admin.js                     |  12 +-
 frontend/src/composables/String.js            |  11 +-
 frontend/src/pages/admin/NotificationsHub.vue | 154 +++++++++++++++---
 test/unit/forge/routes/api/admin_spec.js      |  51 +++++-
 5 files changed, 221 insertions(+), 36 deletions(-)

diff --git a/forge/db/models/User.js b/forge/db/models/User.js
index b093294b02..41c2b4853a 100644
--- a/forge/db/models/User.js
+++ b/forge/db/models/User.js
@@ -169,7 +169,7 @@ module.exports = {
         this.hasMany(M.Invitation, { foreignKey: 'inviteeId' })
         this.belongsTo(M.Team, { as: 'defaultTeam' })
     },
-    finders: function (M) {
+    finders: function (M, app) {
         return {
             static: {
                 admins: async () => {
@@ -285,8 +285,11 @@ module.exports = {
                  * Get users with a particular role
                  * @param {Array} roles An array of valid user roles
                  * @param {Object} options Options
+                 * @param {Boolean} options.count only return a count of results
                  * @param {Boolean} options.summary whether to return a limited user object that only contains id: default false
-                 * @returns Array of users who have at least one of the specific roles
+                 * @param {Array} options.teamTypes limit to teams of certain types
+                 * @param {Array} options.billing array of billing states to include
+                 * @returns Array of users who have at least one of the specific roles, or a count
                  */
                 byTeamRole: async (roles = [], options) => {
                     options = {
@@ -309,7 +312,27 @@ module.exports = {
                         where,
                         include: {
                             model: M.TeamMember,
-                            attributes: ['role']
+                            attributes: ['role'],
+                            include: {
+                                model: M.Team,
+                                attributes: ['suspended', 'TeamTypeId'],
+                                where: {
+                                    // Never include suspended teams
+                                    suspended: false
+                                }
+                            }
+                        }
+                    }
+                    if (options.teamTypes) {
+                        query.include.include.where.TeamTypeId = { [Op.in]: options.teamTypes }
+                        if (options.billing) {
+                            query.include.include.include = {
+                                model: app.db.models.Subscription,
+                                attributes: ['status'],
+                                where: {
+                                    status: { [Op.in]: options.billing.map(opt => opt.toLowerCase()) }
+                                }
+                            }
                         }
                     }
                     if (!options.count) {
diff --git a/forge/routes/api/admin.js b/forge/routes/api/admin.js
index 05d5977c98..9b86413e58 100644
--- a/forge/routes/api/admin.js
+++ b/forge/routes/api/admin.js
@@ -449,10 +449,18 @@ module.exports = async function (app) {
         if (recipientRoles && !recipientRoles.every(value => Object.values(Roles).includes(value))) {
             return reply.code(400).send({ code: 'bad_request', error: 'Invalid Role provided.' })
         }
+        let teamTypes
+        if (filter?.teamTypes && filter.teamTypes.length > 0) {
+            teamTypes = filter.teamTypes.map(app.db.models.TeamType.decodeHashid).flat()
+        }
+        let billing
+        if (filter?.billing && filter.billing.length > 0) {
+            billing = filter.billing
+        }
         if (mock) {
             // If mock is sent, return an indication of how many users would receive this notification
             // without actually sending them.
-            const count = await app.db.models.User.byTeamRole(recipientRoles, { summary: true, count: true })
+            const count = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, billing, summary: true, count: true })
             reply.send({
                 mock: true,
                 recipientCount: count
@@ -460,7 +468,7 @@ module.exports = async function (app) {
             return
         }
 
-        const recipients = await app.db.models.User.byTeamRole(recipientRoles, { summary: true })
+        const recipients = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, summary: true })
         const notificationType = 'announcement'
         const titleSlug = title.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase()
         const uniqueId = Date.now().toString(36) + Math.random().toString(36).substring(2)
diff --git a/frontend/src/composables/String.js b/frontend/src/composables/String.js
index c0befda75d..60cb047cd9 100644
--- a/frontend/src/composables/String.js
+++ b/frontend/src/composables/String.js
@@ -6,7 +6,16 @@ export const isValidURL = (string) => {
 export const capitalize = (string) => {
     return string.charAt(0).toUpperCase() + string.slice(1)
 }
-
+/**
+ * Conditionally pluralize a string
+ * @param {String} stem the text to pluralize based on a count
+ * @param {Number} count the value to pluralize for
+ * @param {String} append (optional) what characters to add if pluralizing. Default: 's'
+ * @returns The pluralized string if count requires a plural
+ */
+export const pluralize = (stem, count, append = 's') => {
+    return stem + ((count === 1) ? '' : append)
+}
 /**
  * @param {Date} date
  * @returns {`${number}-${string}-${string}-${string}:${string}`}
diff --git a/frontend/src/pages/admin/NotificationsHub.vue b/frontend/src/pages/admin/NotificationsHub.vue
index 461c27bd06..2dc6be3e49 100644
--- a/frontend/src/pages/admin/NotificationsHub.vue
+++ b/frontend/src/pages/admin/NotificationsHub.vue
@@ -22,21 +22,53 @@
                         </FormRow>
                     </section>
                     <section>
-                        <label class="block text-sm font-medium mb-1">Audience</label>
+                        <FormHeading>Audience</FormHeading>
                         <div class="ff-description mb-2 space-y-1">Select the audience of your announcement.</div>
-
-                        <label class="block text-sm font-medium mb-2">By User Roles</label>
-                        <label
-                            v-for="(role, $key) in roleIds"
-                            :key="$key"
-                            class="ff-checkbox mb-2"
-                            :data-el="`audience-role-${role}`"
-                            @keydown.space.prevent="toggleRole(role)"
-                        >
-                            <span ref="input" class="checkbox" :checked="form.roles.includes(role)" tabindex="0" @keydown.space.prevent />
-                            <input v-model="form.roles" type="checkbox" :value="role" @keydown.space.prevent>
-                            {{ role }}
-                        </label>
+                        <FormHeading class="mt-4">User Roles:</FormHeading>
+                        <div class="grid gap-1 grid-cols-2 items-middle">
+                            <label
+                                v-for="(role, $key) in roleIds"
+                                :key="$key"
+                                class="ff-checkbox text-sm"
+                                :data-el="`audience-role-${role}`"
+                                @keydown.space.prevent="toggleRole(role)"
+                            >
+                                <span ref="input" class="checkbox" :checked="form.roles.includes(role)" tabindex="0" @keydown.space.prevent />
+                                <input v-model="form.roles" type="checkbox" :value="role" @keydown.space.prevent>
+                                {{ role }}
+                            </label>
+                        </div>
+                        <FormHeading class="mt-4">Team Types:</FormHeading>
+                        <div class="grid gap-1 grid-cols-2 items-middle">
+                            <label
+                                v-for="teamType in teamTypes"
+                                :key="teamType.id"
+                                class="ff-checkbox text-sm"
+                                :class="!teamType.active ? ['inactive-team'] : []"
+                                :data-el="`audience-teamType-${teamType.id}`"
+                                @keydown.space.prevent="toggleTeamType(teamType.id)"
+                            >
+                                <span ref="input" class="checkbox" :checked="form.teamTypes.includes(teamType.id)" tabindex="0" @keydown.space.prevent />
+                                <input v-model="form.teamTypes" type="checkbox" :value="teamType.id" @keydown.space.prevent>
+                                {{ teamType.name }}
+                            </label>
+                        </div>
+                        <template v-if="features.billing">
+                            <FormHeading class="mt-4">Billing State:</FormHeading>
+                            <div class="grid gap-1 grid-cols-2 items-middle">
+                                <label
+                                    v-for="(billingState, $key) in billingStates"
+                                    :key="$key"
+                                    class="ff-checkbox text-sm"
+                                    :data-el="`audience-billing-${billingState}`"
+                                    @keydown.space.prevent="toggleBillingState(billingState)"
+                                >
+                                    <span ref="input" class="checkbox" :checked="form.billing.includes(billingState)" tabindex="0" @keydown.space.prevent />
+                                    <input v-model="form.billing" type="checkbox" :value="billingState" @keydown.space.prevent>
+                                    {{ billingState }}
+                                </label>
+                            </div>
+                        </template>
                     </section>
                 </section>
                 <section class="actions">
@@ -50,16 +82,21 @@
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 import adminApi from '../../api/admin.js'
+import teamTypesApi from '../../api/teamTypes.js'
+
+import FormHeading from '../../components/FormHeading.vue'
 import FormRow from '../../components/FormRow.vue'
+import { pluralize } from '../../composables/String.js'
 import alerts from '../../services/alerts.js'
 import Dialog from '../../services/dialog.js'
 import FfButton from '../../ui-components/components/Button.vue'
 import { RoleNames, Roles } from '../../utils/roles.js'
-
 export default {
     name: 'NotificationsHub',
-    components: { FfButton, FormRow },
+    components: { FfButton, FormRow, FormHeading },
     data () {
         return {
             form: {
@@ -67,26 +104,58 @@ export default {
                 message: '',
                 url: '',
                 roles: [],
+                teamTypes: [],
+                billing: [],
                 externalUrl: true
             },
+            teamTypes: [],
+            billingStates: [
+                'Active',
+                'Trial',
+                'Unmanaged',
+                'Canceled'
+            ],
             errors: {
 
             }
         }
     },
     computed: {
+        ...mapState('account', ['features']),
         roleIds () {
             return Object.values(RoleNames).filter(r => r !== 'none').reverse().map(r => r[0].toUpperCase() + r.substring(1))
         },
         canSubmit () {
             return this.form.title.length > 0 &&
                 this.form.message.length > 0 &&
-                this.form.roles.length > 0
+                this.form.roles.length > 0 &&
+                this.form.teamTypes.length > 0 &&
+                (!this.features.billing || this.form.billing.length > 0)
         },
         urlPlaceholder () {
             return this.form.externalUrl ? 'https://flowfuse.com' : '{ name: "<component-name>", params: {id: "<id>"} }'
         }
     },
+    async created () {
+        const teamTypes = (await teamTypesApi.getTeamTypes(null, null, 'all')).types
+        this.teamTypes = teamTypes.map(tt => {
+            return {
+                order: tt.order,
+                id: tt.id,
+                name: tt.name,
+                active: tt.active
+            }
+        })
+        this.teamTypes.sort((A, B) => {
+            if (A.active === B.active) {
+                return A.order - B.order
+            } else if (A.active) {
+                return -1
+            } else {
+                return 1
+            }
+        })
+    },
     methods: {
         getAnnouncements () {
             return adminApi.getAnnouncementNotifications()
@@ -94,12 +163,23 @@ export default {
         },
         submitForm () {
             return this.sendAnnouncementNotification({ mock: true })
-                .then(mockRes => Dialog.show({
-                    header: 'Platform Wide Announcement',
-                    kind: 'danger',
-                    text: `You are about to send an announcement to ${mockRes.recipientCount} recipients.`,
-                    confirmLabel: 'Continue'
-                }, async () => this.sendAnnouncementNotification({ mock: false })))
+                .then(mockRes => {
+                    if (mockRes.recipientCount === 0) {
+                        Dialog.show({
+                            header: 'Platform Wide Announcement',
+                            text: 'Your filters matched no users.',
+                            confirmLabel: 'Cancel',
+                            canBeCanceled: false
+                        })
+                    } else {
+                        Dialog.show({
+                            header: 'Platform Wide Announcement',
+                            kind: 'danger',
+                            text: `You are about to send an announcement to ${mockRes.recipientCount} ${pluralize('user', mockRes.recipientCount)}.`,
+                            confirmLabel: 'Continue'
+                        }, async () => this.sendAnnouncementNotification({ mock: false }))
+                    }
+                })
         },
         sendAnnouncementNotification ({ mock = true }) {
             const form = { ...this.form }
@@ -107,21 +187,28 @@ export default {
 
             const payload = {
                 mock,
-                ...form,
+                title: form.title,
+                message: form.message,
+                url: form.url,
                 filter: {
-                    roles: this.form.roles.map(r => Roles[r])
+                    roles: this.form.roles.map(r => Roles[r]),
+                    teamTypes: [...this.form.teamTypes]
                 },
                 ...(this.form.externalUrl ? { url: this.form.url } : { to: JSON.parse(this.form.url) })
             }
-
+            if (this.features.billing) {
+                payload.filter.billing = [...this.form.billing]
+            }
             return adminApi.sendAnnouncementNotification(payload)
                 .then(res => {
                     if (!mock) {
-                        alerts.emit(`Announcement sent to ${res.recipientCount} recipients.`, 'confirmation')
+                        alerts.emit(`Announcement sent to ${res.recipientCount} ${pluralize('user', res.recipientCount)}.`, 'confirmation')
                         this.form.title = ''
                         this.form.message = ''
                         this.form.url = ''
                         this.form.roles = []
+                        this.form.teamTypes = []
+                        this.form.billing = []
                     }
                     return res
                 })
@@ -134,6 +221,16 @@ export default {
             if (this.form.roles.includes(role)) {
                 this.form.roles = this.form.roles.filter(r => r !== role)
             } else this.form.roles.push(role)
+        },
+        toggleTeamType (teamTypeId) {
+            if (this.form.teamTypes.includes(teamTypeId)) {
+                this.form.teamTypes = this.form.teamTypes.filter(r => r !== teamTypeId)
+            } else this.form.teamTypes.push(teamTypeId)
+        },
+        toggleBillingState (billingState) {
+            if (this.form.billing.includes(billingState)) {
+                this.form.billing = this.form.billing.filter(r => r !== billingState)
+            } else this.form.billing.push(billingState)
         }
 
     }
@@ -141,6 +238,9 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.inactive-team {
+    color: $ff-grey-400;
+}
 .clear-page-gutters {
     margin: -1.75rem
 }
diff --git a/test/unit/forge/routes/api/admin_spec.js b/test/unit/forge/routes/api/admin_spec.js
index 5e10531e0f..8e7912ae51 100644
--- a/test/unit/forge/routes/api/admin_spec.js
+++ b/test/unit/forge/routes/api/admin_spec.js
@@ -166,7 +166,7 @@ describe('Admin API', async function () {
         })
     })
 
-    describe('notifications', function () {
+    describe.only('notifications', function () {
         after(async function () {
             await app.close()
         })
@@ -190,10 +190,25 @@ describe('Admin API', async function () {
 
             TestObjects.ATeam = await app.db.models.Team.byName('ATeam')
 
+            TestObjects.secondTeamType = await app.db.models.TeamType.create({
+                name: 'second team type',
+                active: false,
+                order: 1,
+                description: '',
+                properties: {}
+            })
+            TestObjects.CTeam = await app.db.models.Team.create({ name: 'CTeam', TeamTypeId: TestObjects.secondTeamType.id, suspended: false })
+            // DTeam is suspended - does not qualify for notifications
+            TestObjects.DTeam = await app.db.models.Team.create({ name: 'DTeAbCam', TeamTypeId: TestObjects.secondTeamType.id, suspended: true })
+
             await TestObjects.BTeam.addUser(TestObjects.notificationUser1, { through: { role: app.factory.Roles.Roles.Owner } })
             await TestObjects.BTeam.addUser(TestObjects.notificationUser2, { through: { role: app.factory.Roles.Roles.Member } })
             await TestObjects.BTeam.addUser(TestObjects.notificationUser3, { through: { role: app.factory.Roles.Roles.Viewer } })
-            await TestObjects.BTeam.addUser(TestObjects.notificationUser4, { through: { role: app.factory.Roles.Roles.Dashboard } })
+            await TestObjects.CTeam.addUser(TestObjects.notificationUser3, { through: { role: app.factory.Roles.Roles.Viewer } })
+            await TestObjects.CTeam.addUser(TestObjects.notificationUser4, { through: { role: app.factory.Roles.Roles.Dashboard } })
+
+            await TestObjects.DTeam.addUser(TestObjects.notificationUser1, { through: { role: app.factory.Roles.Roles.Viewer } })
+            await TestObjects.DTeam.addUser(TestObjects.notificationUser2, { through: { role: app.factory.Roles.Roles.Dashboard } })
         })
 
         async function sendNotification (payload) {
@@ -229,7 +244,7 @@ describe('Admin API', async function () {
             count.should.equal(2)
         })
 
-        it('send to member/viewer', async function () {
+        it('send to member/viewer - any team type', async function () {
             const payload = {
                 message: 'member/viewer only message',
                 title: 'member/viewer only title',
@@ -257,6 +272,36 @@ describe('Admin API', async function () {
             ;(notifications[0].UserId === TestObjects.notificationUser2.id).should.be.true()
             ;(notifications[1].UserId === TestObjects.notificationUser3.id).should.be.true()
         })
+        it('send to member/viewer - single team', async function () {
+            const payload = {
+                message: 'member/viewer only message',
+                title: 'member/viewer only title',
+                filter: {
+                    roles: [app.factory.Roles.Roles.Member, app.factory.Roles.Roles.Viewer],
+                    teamTypes: [TestObjects.secondTeamType.hashid]
+                },
+                mock: true
+            }
+            let response = await sendNotification(payload)
+            response.should.have.property('statusCode', 200)
+            let result = response.json()
+            result.should.have.property('mock', true)
+            result.should.have.property('recipientCount', 1)
+
+            // Resend without mock
+            delete payload.mock
+            response = await sendNotification(payload)
+            response.should.have.property('statusCode', 200)
+            result = response.json()
+            result.should.not.have.property('mock')
+            result.should.have.property('recipientCount', 1)
+
+            const notifications = await app.db.models.Notification.findAll()
+            const count = notifications.length
+            count.should.equal(1)
+
+            ;(notifications[0].UserId === TestObjects.notificationUser3.id).should.be.true()
+        })
 
         it('does not send duplicate notifications if filter matches multiple times', async function () {
             const payload = {

From 9eaf553578ae95b57607abfe93437f2ea3851f96 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 28 Nov 2024 15:17:09 +0000
Subject: [PATCH 2/6] Remove .only

---
 test/unit/forge/routes/api/admin_spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/forge/routes/api/admin_spec.js b/test/unit/forge/routes/api/admin_spec.js
index 8e7912ae51..44f2f6cce3 100644
--- a/test/unit/forge/routes/api/admin_spec.js
+++ b/test/unit/forge/routes/api/admin_spec.js
@@ -166,7 +166,7 @@ describe('Admin API', async function () {
         })
     })
 
-    describe.only('notifications', function () {
+    describe('notifications', function () {
         after(async function () {
             await app.close()
         })

From 7edc6bc880b94c67551726a6f86f7ca58ce13c17 Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Thu, 28 Nov 2024 16:46:30 +0000
Subject: [PATCH 3/6] Fix e2e tests

---
 .../frontend/cypress/tests/admin/notifications-hub.spec.js    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/e2e/frontend/cypress/tests/admin/notifications-hub.spec.js b/test/e2e/frontend/cypress/tests/admin/notifications-hub.spec.js
index 8ff297783c..c8d15c56ee 100644
--- a/test/e2e/frontend/cypress/tests/admin/notifications-hub.spec.js
+++ b/test/e2e/frontend/cypress/tests/admin/notifications-hub.spec.js
@@ -33,6 +33,8 @@ describe('FlowForge - Notifications Hub', () => {
         cy.get('[data-el="notification-external-url"] input').type('https://flowfuse.com')
         cy.get('[data-action="submit"]').should('be.disabled')
         cy.get('[data-el="audience-role-Owner"]').click()
+        cy.get('[data-action="submit"]').should('be.disabled')
+        cy.get('[data-el^="audience-teamType-"]').click()
         cy.get('[data-action="submit"]').should('not.be.disabled')
 
         cy.get('[data-el="platform-dialog"]').should('not.be.visible')
@@ -42,7 +44,7 @@ describe('FlowForge - Notifications Hub', () => {
         cy.get('[data-el="platform-dialog"]').should('be.visible')
 
         cy.get('[data-el="platform-dialog"] .ff-dialog-header').contains('Platform Wide Announcement')
-        cy.get('[data-el="platform-dialog"] .ff-dialog-content').contains('You are about to send an announcement to 2 recipients.')
+        cy.get('[data-el="platform-dialog"] .ff-dialog-content').contains('You are about to send an announcement to 2 users.')
 
         cy.get('[data-action="dialog-cancel"]').click()
         cy.get('[data-el="platform-dialog"]').should('not.be.visible')

From d9089313e701c5c95f6225522350a407d7b4db2f Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 3 Dec 2024 16:48:43 +0000
Subject: [PATCH 4/6] Update forge/routes/api/admin.js

Co-authored-by: Costin Serban <cstn.serban@gmail.com>
---
 forge/routes/api/admin.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/forge/routes/api/admin.js b/forge/routes/api/admin.js
index 9b86413e58..63b71e6a2f 100644
--- a/forge/routes/api/admin.js
+++ b/forge/routes/api/admin.js
@@ -468,7 +468,7 @@ module.exports = async function (app) {
             return
         }
 
-        const recipients = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, summary: true })
+        const recipients = await app.db.models.User.byTeamRole(recipientRoles, { teamTypes, billing, summary: true })
         const notificationType = 'announcement'
         const titleSlug = title.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase()
         const uniqueId = Date.now().toString(36) + Math.random().toString(36).substring(2)

From 42384b6926c4f9b00b5dd608dea68b7c8121853d Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 3 Dec 2024 16:49:24 +0000
Subject: [PATCH 5/6] Update frontend/src/pages/admin/NotificationsHub.vue

Co-authored-by: Costin Serban <cstn.serban@gmail.com>
---
 frontend/src/pages/admin/NotificationsHub.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/admin/NotificationsHub.vue b/frontend/src/pages/admin/NotificationsHub.vue
index 2dc6be3e49..5b15e29120 100644
--- a/frontend/src/pages/admin/NotificationsHub.vue
+++ b/frontend/src/pages/admin/NotificationsHub.vue
@@ -176,7 +176,8 @@ export default {
                             header: 'Platform Wide Announcement',
                             kind: 'danger',
                             text: `You are about to send an announcement to ${mockRes.recipientCount} ${pluralize('user', mockRes.recipientCount)}.`,
-                            confirmLabel: 'Continue'
+                            confirmLabel: 'Continue',
+                            canBeCanceled: false
                         }, async () => this.sendAnnouncementNotification({ mock: false }))
                     }
                 })

From c4bd0c9e19ac5f9ce6e9ff3fcf18bbb01c67024b Mon Sep 17 00:00:00 2001
From: Nick O'Leary <nick.oleary@gmail.com>
Date: Tue, 3 Dec 2024 16:52:15 +0000
Subject: [PATCH 6/6] Fix confirm dialog missing cancel

---
 frontend/src/pages/admin/NotificationsHub.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/admin/NotificationsHub.vue b/frontend/src/pages/admin/NotificationsHub.vue
index 5b15e29120..cc40512c88 100644
--- a/frontend/src/pages/admin/NotificationsHub.vue
+++ b/frontend/src/pages/admin/NotificationsHub.vue
@@ -177,7 +177,7 @@ export default {
                             kind: 'danger',
                             text: `You are about to send an announcement to ${mockRes.recipientCount} ${pluralize('user', mockRes.recipientCount)}.`,
                             confirmLabel: 'Continue',
-                            canBeCanceled: false
+                            canBeCanceled: true
                         }, async () => this.sendAnnouncementNotification({ mock: false }))
                     }
                 })