WEB-607 Add the row Is Self Service in the User Details Page (#3025)

src/app/users/view-user/view-user.component.html

@@ -47,11 +47,6 @@
           </div>
         }
 
-        <div class="content-row">
-          <div class="label">{{ 'labels.inputs.Office' | translate }}</div>
-          <div class="value">{{ userData.officeName }}</div>
-        </div>
-
         <div class="content-row">
           <div class="label">{{ 'labels.inputs.Roles' | translate }}</div>
           <div class="value">
@@ -62,6 +57,17 @@
             }
           </div>
         </div>
+
+        <div class="content-row">
+          <div class="label">{{ 'labels.buttons.Is Self Service' | translate }}</div>
+          <div class="value">
+            <span
+              [ngClass]="userData.selfService ? 'self-service-true' : 'self-service-false'"
+              class="self-service-indicator"
+            ></span>
+            {{ userData.selfService ? ('labels.buttons.Yes' | translate) : ('labels.buttons.No' | translate) }}
+          </div>
+        </div>
       </div>
 
       <div class="layout-row layout-align-center gap-2percent column-on-mobile back-button-container">

src/app/users/view-user/view-user.component.scss

@@ -86,6 +86,26 @@
     margin-top: 2rem;
   }
 
+  .self-service-indicator {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+    vertical-align: middle;
+    box-sizing: border-box;
+  }
+
+  .self-service-true {
+    background-color: #43a047;
+    border: 1px solid #388e3c;
+  }
+
+  .self-service-false {
+    background-color: #e53935;
+    border: 1px solid #b71c1c;
+  }
+
   button {
     transition: all 0.2s ease;