24648- Enable new role support for contact_centre_staff

auth-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.7.2",
+  "version": "2.7.3",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,

auth-web/src/components/auth/account-settings/account-info/AccountInfo.vue

@@ -291,7 +291,7 @@
 </template>
 
 <script lang="ts">
-import { AccessType, AccountStatus, Pages, Permission, Role, SuspensionReason } from '@/util/constants'
+import { AccessType, AccountStatus, Permission, Role, SuspensionReason } from '@/util/constants'
 import { CreateRequestBody, OrgBusinessType } from '@/models/Organization'
 import { computed, defineComponent, onBeforeUnmount, onMounted, reactive, toRefs } from '@vue/composition-api'
 import { useAccount, useAccountChangeHandler } from '@/composables'
@@ -361,16 +361,15 @@ export default defineComponent({
       isBusinessAccount: computed(() => orgStore.isBusinessAccount),
       baseAddress: computed(() => currentOrgAddress.value),
 
-      isStaff: computed(() => userStore.currentUser.roles.includes(Role.Staff)),
+      isStaff: computed(() => userStore.currentUser.roles.includes(Role.Staff)) || userStore.currentUser.roles.includes(Role.ContactCentreStaff),
       isSuspendButtonVisible: computed(() => (
         (currentOrganization.value.statusCode === AccountStatus.ACTIVE ||
         currentOrganization.value.statusCode === AccountStatus.SUSPENDED) &&
         userStore.currentUser.roles.includes(Role.StaffSuspendAccounts)
       )),
       isDeactivateButtonVisible: computed(() => currentOrganization.value?.statusCode !== AccountStatus.INACTIVE),
-      editAccountUrl: Pages.EDIT_ACCOUNT_TYPE,
-      canChangeAccessType: computed(() => userStore.currentUser.roles.includes(Role.StaffManageAccounts)),
-      isAddressEditable: computed(() => [Permission.CHANGE_ADDRESS].some(per => permissions.value.includes(per))),
+      canChangeAccessType: computed(() => userStore.currentUser.roles.includes(Role.StaffManageAccounts)) &&
+      !userStore.currentUser.roles.includes(Role.ContactCentreStaff),
       isAdminContactViewable: computed(() => [Permission.VIEW_ADMIN_CONTACT].some(per => permissions.value.includes(per))),
       isAccountStatusActive: computed(() => currentOrganization.value.statusCode === AccountStatus.ACTIVE),
       accountType: computed(() => {
@@ -384,7 +383,8 @@ export default defineComponent({
       isAddressInfoIncomplete: computed(() => (
         currentOrgAddress.value ? Object.keys(currentOrgAddress.value).length === 0 : true
       )),
-      nameChangeNotAllowed: computed(() => (anonAccount.value || isGovmAccount.value))
+      nameChangeNotAllowed: computed(() => (anonAccount.value || isGovmAccount.value)) &&
+      userStore.currentUser.roles.includes(Role.ContactCentreStaff)
     })
 
     const suspensionSelectRules = [

auth-web/src/components/auth/account-settings/team-management/InvitationsDataTable.vue

@@ -30,6 +30,7 @@
     <template #[`item.action`]="{ item }">
       <!-- Resend Invitation -->
       <v-btn
+        v-can:EDIT_USER.hide
         icon
         class="mr-1"
         aria-label="Resend invitation"
@@ -42,6 +43,7 @@
 
       <!-- Remove Invitation -->
       <v-btn
+        v-can:EDIT_USER.hide
         icon
         aria-label="Remove Invitation"
         title="Remove Invitation"

auth-web/src/components/auth/account-settings/team-management/MemberDataTable.vue

@@ -151,6 +151,7 @@
         <!-- Remove User -->
         <v-btn
           v-show="canRemove(item)"
+          v-can:EDIT_USER.hide
           icon
           aria-label="Remove Team Member"
           title="Remove Team Member"
@@ -231,12 +232,13 @@
 </template>
 
 <script lang="ts">
-import { AccessType, LoginSource, Permission } from '@/util/constants'
+import { AccessType, LoginSource, Permission, Role } from '@/util/constants'
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
 import { Member, MembershipStatus, MembershipType, Organization, RoleInfo } from '@/models/Organization'
 import { mapActions, mapState } from 'pinia'
 import { Business } from '@/models/business'
 import CommonUtils from '@/util/common-util'
+import { KCUserProfile } from 'sbc-common-components/src/models/KCUserProfile'
 import ModalDialog from '@/components/auth/common/ModalDialog.vue'
 import { useBusinessStore } from '@/stores/business'
 import { useOrgStore } from '@/stores/org'
@@ -260,6 +262,7 @@ export interface ChangeRolePayload {
       'permissions'
     ]),
     ...mapState(useUserStore, [
+      'currentUser',
       'roleInfos'
     ])
   },
@@ -272,6 +275,7 @@ export interface ChangeRolePayload {
 })
 export default class MemberDataTable extends Vue {
   @Prop({ default: '' }) private userNamefilterText: string
+  protected readonly currentUser!: KCUserProfile
   private readonly businesses!: Business[]
   private activeOrgMembers!: Member[]
   private readonly currentMembership!: Member
@@ -401,16 +405,18 @@ export default class MemberDataTable extends Vue {
   }
 
   private canChangeRole (memberBeingChanged: Member): boolean {
+    if (this.currentUser.roles?.includes(Role.ContactCentreStaff)) {
+      return false
+    }
+
     if (this.currentMembership.membershipStatus !== MembershipStatus.Active) {
       return false
     }
 
     switch (this.currentMembership.membershipTypeCode) {
       case MembershipType.Admin:
         // Owners can change roles of other users who are not owners
-        if (
-          !this.isOwnMembership(memberBeingChanged)
-        ) {
+        if (!this.isOwnMembership(memberBeingChanged)) {
           return true
         }
         // And they can downgrade their own role if there is another owner on the team

auth-web/src/components/auth/account-settings/team-management/PendingMemberDataTable.vue

@@ -28,6 +28,7 @@
     </template>
     <template #[`item.action`]="{ item }">
       <v-btn
+        v-can:EDIT_USER.hide
         icon
         class="mr-1"
         aria-label="Approve user access to this account"
@@ -38,6 +39,7 @@
         <v-icon>mdi-check-circle-outline</v-icon>
       </v-btn>
       <v-btn
+        v-can:EDIT_USER.hide
         icon
         aria-label="Deny access to this account"
         title="Deny access to this account"

auth-web/src/components/auth/account-settings/team-management/UserManagement.vue

@@ -39,7 +39,6 @@
         Active
       </v-tab>
       <v-tab
-        v-can:INVITE_MEMBERS.hide
         data-test="pending-approval-tab"
       >
         <v-badge
@@ -52,7 +51,6 @@
         </v-badge>
       </v-tab>
       <v-tab
-        v-can:INVITE_MEMBERS.hide
         data-test="invitations-tab"
       >
         Invitations

auth-web/src/components/auth/common/ProductTOS.vue

@@ -10,6 +10,7 @@
     </div>
     <v-checkbox
       v-model="termsAccepted"
+      v-can:EDIT_USER.disabled
       color="primary"
       class="terms-checkbox align-checkbox-label--top ma-0 pa-0"
       hide-details
@@ -40,7 +41,7 @@
 <script lang="ts">
 import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator'
 
-@Component
+@Component({})
 export default class ProductTOS extends Vue {
   @Prop({ default: '' }) userName: string
   @Prop({ default: '' }) orgName: string

auth-web/src/components/auth/common/StaffAccountsTable.vue

@@ -275,7 +275,10 @@
                         </v-btn>
                       </template>
                       <v-list>
-                        <v-list-item @click="viewInBusinessRegistryDashboard(item)">
+                        <v-list-item
+                          v-can:VIEW_BUSINESS_REGISTRY_DASHBOARD
+                          @click="viewInBusinessRegistryDashboard(item)"
+                        >
                           <v-list-item-subtitle>
                             <v-icon style="font-size: 14px">mdi-view-dashboard</v-icon>
                             <span class="pl-2">Business Registry Dashboard</span>
@@ -302,6 +305,7 @@
 
 <script lang="ts">
 import { AccessType, Account, AccountStatus, LoginSource, SessionStorageKeys } from '@/util/constants'
+
 import {
   DEFAULT_DATA_OPTIONS,
   cachePageInfo,