From 21e55af0b173237c5a21e13ea2b5e7fedf9242d1 Mon Sep 17 00:00:00 2001
From: Madhuravas <madhuravasreddy1998@gmail.com>
Date: Thu, 12 Oct 2023 17:29:50 +0530
Subject: [PATCH] MOSIP-29776 fixed multi language UI issues in update my data

Signed-off-by: Madhuravas <madhuravasreddy1998@gmail.com>
---
 .../updatedemographic.component.css           | 140 ++++--
 .../updatedemographic.component.html          | 414 ++++++++++--------
 .../updatedemographic.component.ts            |  64 +--
 .../app/shared/dialog/dialog.component.css    |   9 +-
 .../app/shared/dialog/dialog.component.html   |  12 +-
 resident-ui/src/assets/i18n/ara.json          |  13 +-
 resident-ui/src/assets/i18n/eng.json          |  12 +-
 resident-ui/src/assets/i18n/fra.json          |  12 +-
 resident-ui/src/assets/i18n/hin.json          |  24 +-
 resident-ui/src/assets/i18n/kan.json          |  14 +-
 resident-ui/src/assets/i18n/spa.json          |  12 +-
 resident-ui/src/assets/i18n/tam.json          |  20 +-
 12 files changed, 447 insertions(+), 299 deletions(-)

diff --git a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css
index b0a5d6a2..e11a99c5 100644
--- a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css
+++ b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.css
@@ -294,11 +294,8 @@ label{
   font-size: 11px;
 }
 .warning-message-for-contact{
-  margin: 0px; 
   color: red; 
   font-size: 12px;
-  font-weight: 600;
-  margin-top: -14px;
 }
 
 ::ng-deep .mat-grid-tile .mat-figure{
@@ -398,18 +395,6 @@ label{
   color: #89730B;
   font-size: 14px;
 }
-.number-of-attems-arrow-shape{
-   position: absolute;
-   width: 10px;
-   height: 10px;
-   border: 1.5px solid #89730B;
-   top: 10px;
-   left: -5.5px;
-   transform: rotate(45deg);
-   background-color: #FFF9DB;
-   border-right: none;
-   border-top: none;
-}
 
 .low-number-of-attems-left-card{
   border: 1.5px solid #DB4F4F;
@@ -422,20 +407,61 @@ label{
   color: #DB4F4F;
   font-size: 14px;
 }
-.low-number-of-attems-arrow-shape{
+
+.number-of-attems-arrow-shape{
    position: absolute;
    width: 10px;
    height: 10px;
-   border: 1.5px solid #DB4F4F;
+   border: 1.5px solid #89730B;
    top: 10px;
    left: -5.5px;
    transform: rotate(45deg);
-   background-color: #FFEAEA;
+   background-color: #FFF9DB;
    border-right: none;
    border-top: none;
 }
 
+.low-number-of-attems-arrow-shape{
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid #DB4F4F;
+  top: 10px;
+  left: -5.5px;
+  transform: rotate(45deg);
+  background-color: #FFEAEA;
+  border-right: none;
+  border-top: none;
+}
+
+.ara-number-of-attems-arrow-shape{
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid #89730B;
+  top: 10px;
+  transform: rotate(45deg);
+  background-color: #FFF9DB;
+  border-left: none;
+  border-bottom: none;
+  margin-left: 1.36px;
+}
+
+.low-ara-number-of-attems-arrow-shape{
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid #DB4F4F;
+  top: 10px;
+  transform: rotate(45deg);
+  background-color: #FFEAEA;
+  border-left: none;
+  border-bottom: none;
+  margin-left: 1.36px;
+}
+
 .number-of-attems-main-card{
+  direction: ltr;
   display: block;
   margin-bottom: -25px;
   width: 60%;
@@ -449,6 +475,42 @@ label{
   display: none;
 }
 
+.perLang-submit-btn-card{
+  float: right;
+  margin-right: 2rem; 
+  margin-top: none;
+}
+.perLang-submit-btn-card-ara{
+  float: left;
+  margin-right: 2rem; 
+  margin-top: none;
+}
+
+.contact-update-card{
+  margin: 8px; 
+  display: flex;
+  flex-direction: row;
+  width:"100%";
+}
+
+.contact-update-sub-card{
+  display: flex; 
+  flex-direction: row;
+  width: 48%;
+  margin-bottom: 1rem;
+}
+
+.contact-update-each-sub-card{
+  width: 50%; 
+  margin-right: 12px;
+}
+
+.contact-lable{
+  height: 20px; 
+  overflow-wrap: break-word;
+  color: #000000 !important;
+}
+
 @media screen and ((min-width:950px) and (max-width:1300px)){
   .number-of-attems-main-card{
     width: 80%;
@@ -459,9 +521,6 @@ label{
   .show-preview-image-mobile{
     display: none;
   }
-  .contact-send-otp-btn{
-    margin-top: 1.4rem;
-  }
 }
 
 @media screen and ((min-width:824px) and (max-width:988px)) {
@@ -483,9 +542,6 @@ label{
   .file-Upload-card{
     width: 67%;
   }
-  .contact-send-otp-btn{
-    margin-top: 1.4rem;
-  }
   .number-of-attems-left-card{
     width: 100%;
   }
@@ -494,6 +550,17 @@ label{
   }
 }
 
+@media screen and ((min-width:550px) and (max-width:1300px)) {
+  .contact-update-card{
+    flex-direction: column;
+  }
+  .contact-update-sub-card{
+    display: flex; 
+    flex-direction: row;
+    width: 100%;
+  }
+}
+
 @media screen and (max-width:823px) {
   .main-contianer{
     padding: 0.5rem 1rem 0 1rem; 
@@ -522,27 +589,25 @@ label{
   .file-Upload-card{
     width: 100%;
   }
+
 }
 
 @media screen and ((min-width:550px) and (max-width:749px)) {
-  /* .each-tab-group-main-table{
-    width: 80%;
-  } */
   .width-of-input{
     width: 36%;
   }
   .file-Upload-card{
     width: 100%;
   }
-  .contact-send-otp-btn{
-    margin-top: 1.4rem;
+  .contact-update-card{
+    margin: 8px; 
+    display: flex;
+    flex-direction: column;
+    width:"99%";
   }
   
 }
 @media screen and (max-width:549px) {
-  /* .each-tab-group-main-table{
-    width: 90%;
-  } */
   .width-of-input{
     width: 45%;
   }
@@ -561,4 +626,15 @@ label{
   .preview-input-size{
     width: 100%;
   }
+  .contact-update-card{
+    flex-direction: column;
+  }
+  .contact-update-sub-card{
+    flex-direction: column;
+    width: 100%;
+  }
+  .contact-update-each-sub-card{
+    width: 100%; 
+    margin-right: 12px;
+  }
 }
diff --git a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.html b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.html
index ede7c8e2..b994d642 100644
--- a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.html
+++ b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.html
@@ -2,9 +2,11 @@
   <a (click)="onItemSelected('uinservices/dashboard')">{{'dashboard.uinservices' | translate}} &nbsp;&nbsp;</a> >
   &nbsp;&nbsp;<span style="cursor: pointer;"
     (click)="onItemSelected('uinservices/updatedemographic')">{{'updatedemographic.title' | translate}}</span>
-  <span [ngClass]="!showPreviewPage ? 'active' : 'demographic'" (click)="onItemSelected('matTabLabel')">&nbsp; > &nbsp;
+  <span [ngClass]="!showPreviewPage ? 'active' : 'demographic'" (click)="onItemSelected('matTabLabel')">&nbsp;&nbsp; >
+    &nbsp;&nbsp;
     {{matTabLabel}}</span>
-  &nbsp;&nbsp;<span *ngIf="showPreviewPage" class="active">&nbsp; > &nbsp; {{'preview.title' | translate}}</span>
+  &nbsp;&nbsp;<span *ngIf="showPreviewPage" class="active">&nbsp;&nbsp; > &nbsp;&nbsp; {{'updatedemographic.preview' |
+    translate}}</span>
 </span>
 <div class="spinner" *ngIf="isLoading">
   <mat-spinner></mat-spinner>
@@ -27,8 +29,9 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           <!-- number of attems mobile and tab code -->
                           <tr class="number-of-attems-mobile-card">
                             <td>
-                              <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
-                                <div>
+                              <div
+                                [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
+                                <div *ngIf="langJson && attributeUpdateCountMaxLimit">
                                   <span
                                     style="display: block; font-weight: 600;">{{langJson.remainingAttems.replace("$remainingAttems",
                                     attributeUpdateCountRemainLimit[field.attributeName])}}</span>
@@ -42,15 +45,19 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           <tr>
                             <td class="width-of-input"><label>{{field.labelName[langCode][0]}}</label></td>
                             <td width="3%" class="ele-for-lap-tab-card"></td>
-                            <td class="width-of-input ele-for-lap-tab-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                            <td class="width-of-input ele-for-lap-tab-card">
+                              <label>{{field.labelName[langCode][1]}}</label>
+                            </td>
                           </tr>
                           <tr>
                             <td class="width-of-input"><input type="text" class="readonly" readonly="true"
-                                disabled="true" [value]="buildJSONData[field.attributeName].value | date:'dd/MMM/yyyy'"></td>
+                                disabled="true" [value]="buildJSONData[field.attributeName].value | date:'dd/MMM/yyyy'">
+                            </td>
                             <td width="3%" class="ele-for-lap-tab-card"></td>
                             <td class="width-of-input ele-for-lap-tab-card">
                               <div class="date-input-card" *ngIf="langJson">
-                                <input [disabled]="attributeUpdateCountRemainLimit[field.attributeName] === 0" [max]="maxdate" style=" border: none;" matInput
+                                <input [disabled]="attributeUpdateCountRemainLimit[field.attributeName] === 0"
+                                  [max]="maxdate" style=" border: none;" matInput
                                   [placeholder]="langJson.calendarPlaceHolder" [matDatepicker]="picker" readonly
                                   id="{{field.attributeName}}"
                                   (dateChange)="captureDatePickerValue($event, field.attributeName, buildJSONData[field.attributeName].value)"
@@ -64,9 +71,17 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                             </td>
                             <td width="1%" class="ele-for-lap-tab-card"></td>
                             <td *ngIf="attributeUpdateCountRemainLimit" class="number-of-attems-main-card">
-                              <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
-                                <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-arrow-shape':'number-of-attems-arrow-shape'"></div>
-                                <div *ngIf="langJson">
+                              <div
+                                [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
+                                <div *ngIf="langCode !== 'ara'"
+                                  [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-arrow-shape':'number-of-attems-arrow-shape'">
+                                </div>
+                                <div *ngIf="langCode === 'ara'" style="float: right;">
+                                  <div
+                                    [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-ara-number-of-attems-arrow-shape':'ara-number-of-attems-arrow-shape'">
+                                  </div>
+                                </div>
+                                <div style="padding: 4px;" *ngIf="langJson && attributeUpdateCountMaxLimit" [ngClass]="langCode === 'ara' ? 'dir-rtl' :'dir-ltl'">
                                   <span
                                     style="display: block; font-weight: 600;">{{langJson.remainingAttems.replace("$remainingAttems",
                                     attributeUpdateCountRemainLimit[field.attributeName])}}</span>
@@ -86,12 +101,14 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           </tr>
                           <!-- input field for mobile view -->
                           <tr>
-                            <td class="width-of-input ele-for-mob-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                            <td class="width-of-input ele-for-mob-card"><label>{{field.labelName[langCode][1]}}</label>
+                            </td>
                           </tr>
                           <tr>
                             <td class="sub-table-row ele-for-mob-card">
                               <div class="date-input-card" *ngIf="langJson">
-                                <input [disabled]="attributeUpdateCountRemainLimit[field.attributeName] === 0" [max]="maxdate" style=" border: none;" matInput
+                                <input [disabled]="attributeUpdateCountRemainLimit[field.attributeName] === 0"
+                                  [max]="maxdate" style=" border: none;" matInput
                                   [placeholder]="langJson.calendarPlaceHolder" [matDatepicker]="picker" readonly
                                   id="{{field.attributeName}}"
                                   (dateChange)="captureDatePickerValue($event, field.attributeName, buildJSONData[field.attributeName])"
@@ -117,14 +134,16 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                     <tr *ngIf="field.controlType === 'textbox'">
                       <td class="main-table-data" width="100%">
                         <table width="100%" *ngFor="let language of supportedLanguages;">
-                           <!-- number of attems mobile and tab code -->
-                           <tr class="number-of-attems-mobile-card">
+                          <!-- number of attems mobile and tab code -->
+                          <tr class="number-of-attems-mobile-card">
                             <td>
-                              <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'" >
+                              <div
+                                [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
                                 <div>
                                   <span
                                     style="display: block; font-weight: 600;">{{langJson.remainingAttems.replace("$remainingAttems",attributeUpdateCountRemainLimit[field.attributeName])}}</span>
-                                  <span *ngIf="attributeUpdateCountMaxLimit" style="display: block;">{{langJson.maxAttems.replace("$MaxAttems",
+                                  <span *ngIf="attributeUpdateCountMaxLimit"
+                                    style="display: block;">{{langJson.maxAttems.replace("$MaxAttems",
                                     attributeUpdateCountMaxLimit[field.attributeName]).replace("$Name",langJson[field.attributeName])}}</span>
                                 </div>
                               </div>
@@ -134,7 +153,9 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           <tr>
                             <td class="width-of-input"><label>{{field.labelName[langCode][0]}}</label></td>
                             <td width="3%" class="ele-for-lap-tab-card"></td>
-                            <td class="width-of-input ele-for-lap-tab-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                            <td class="width-of-input ele-for-lap-tab-card">
+                              <label>{{field.labelName[langCode][1]}}</label>
+                            </td>
                           </tr>
                           <tr *ngFor="let item of buildJSONData[field.attributeName], let i = index">
                             <td class="sub-table-row" class="width-of-input" class="each-input-data"
@@ -155,16 +176,25 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                                 <i matSuffix class="material-icons mat-keyboard-icon"
                                   (click)="openKeyboard(field.attributeName+item.language, item.language)">keyboard</i>
                               </div>
-                              
+
                             </td>
                             <td class="sub-table-row ele-for-lap-tab-card" width="1%"></td>
                             <td *ngIf="i===0 && attributeUpdateCountRemainLimit" class="number-of-attems-main-card">
-                              <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'" >
-                                <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-arrow-shape':'number-of-attems-arrow-shape'"></div>
-                                <div>
+                              <div
+                                [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
+                                <div *ngIf="langCode !== 'ara'"
+                                  [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-arrow-shape':'number-of-attems-arrow-shape'">
+                                </div>
+                                <div *ngIf="langCode === 'ara'" style="float: right;">
+                                  <div
+                                    [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-ara-number-of-attems-arrow-shape':'ara-number-of-attems-arrow-shape'">
+                                  </div>
+                                </div>
+                                <div style="padding: 4px;" *ngIf="langJson" [ngClass]="langCode === 'ara' ? 'dir-rtl' :'dir-ltl'">
                                   <span
                                     style="display: block; font-weight: 600;">{{langJson.remainingAttems.replace("$remainingAttems",attributeUpdateCountRemainLimit[field.attributeName])}}</span>
-                                  <span *ngIf="attributeUpdateCountMaxLimit" style="display: block;">{{langJson.maxAttems.replace("$MaxAttems",
+                                  <span *ngIf="attributeUpdateCountMaxLimit"
+                                    style="display: block;">{{langJson.maxAttems.replace("$MaxAttems",
                                     attributeUpdateCountMaxLimit[field.attributeName]).replace("$Name",langJson[field.attributeName])}}</span>
                                 </div>
                               </div>
@@ -180,21 +210,22 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           </tr>
                           <!-- input field for mobile view -->
                           <tr>
-                            <td class="width-of-input ele-for-mob-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                            <td class="width-of-input ele-for-mob-card"><label>{{field.labelName[langCode][1]}}</label>
+                            </td>
                           </tr>
                           <tr *ngFor="let item of buildJSONData[field.attributeName]">
                             <td class="sub-table-row ele-for-mob-card">
                               <div class="search-input-card" [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
                                 <input class="input" matInput #{{field.attributeName}}
-                                  id="{{field.attributeName}}{{item.language}}"
+                                  id="{{field.attributeName}}{{item.language}}Mobile"
                                   (blur)="captureValue($event, field.attributeName, item.language, item.value)"
                                   placeholder="{{field.placeHolder[item.language]}}"
                                   [value]="userInputValues[field.attributeName][item.language]"
-                                  (focus)="captureVirtualKeyboard(field.attributeName + item.language, item.index)"
+                                  (focus)="captureVirtualKeyboard(field.attributeName + item.language+'Mobile', item.mobileIndex)"
                                   [disabled]="attributeUpdateCountRemainLimit[field.attributeName] === 0"
                                   #keyboardRef />
                                 <i matSuffix class="material-icons mat-keyboard-icon"
-                                  (click)="openKeyboard(field.attributeName+item.language, item.language)">keyboard</i>
+                                  (click)="openKeyboard(field.attributeName+item.language+'Mobile', item.language)">keyboard</i>
                               </div>
                             </td>
                           </tr>
@@ -204,18 +235,19 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                                 {{langJson.sameNameInputErrorMsg.replace("$NAME",langJson[field.attributeName]).replace("$NAME",langJson[field.attributeName])}}</span>
                             </td>
                           </tr>
-                        <!-- input field for mobile view -->
+                          <!-- input field for mobile view -->
                         </table>
                       </td>
                     </tr>
                     <tr *ngIf="field.controlType === 'dropdown'">
                       <td class="main-table-data" width="100%">
-                        <table width="100%" >
+                        <table width="100%">
                           <!-- number of attems mobile and tab code -->
                           <tr class="number-of-attems-mobile-card">
                             <td>
-                              <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
-                                <div>
+                              <div
+                                [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
+                                <div style="padding-right: 4px;" *ngIf="langJson && attributeUpdateCountMaxLimit">
                                   <span
                                     style="display: block; font-weight: 600;">{{langJson.remainingAttems.replace("$remainingAttems",
                                     attributeUpdateCountRemainLimit[field.attributeName])}}</span>
@@ -225,11 +257,13 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                               </div>
                             </td>
                           </tr>
-                           <!-- number of attems mobile and tab code -->
+                          <!-- number of attems mobile and tab code -->
                           <tr>
                             <td class="width-of-input"><label>{{field.labelName[langCode][0]}}</label></td>
                             <td width="3%" class="ele-for-lap-tab-card"></td>
-                            <td class="width-of-input ele-for-lap-tab-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                            <td class="width-of-input ele-for-lap-tab-card">
+                              <label>{{field.labelName[langCode][1]}}</label>
+                            </td>
                           </tr>
                           <tr *ngFor="let item of buildJSONData[field.attributeName], let i = index">
                             <td class="sub-table-row width-of-input"
@@ -257,9 +291,17 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                             </td>
                             <td class="sub-table-row ele-for-lap-tab-card" width="1%"></td>
                             <td *ngIf="i===0 && attributeUpdateCountRemainLimit" class="number-of-attems-main-card">
-                              <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
-                                <div [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-arrow-shape':'number-of-attems-arrow-shape'"></div>
-                                <div>
+                              <div
+                                [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-left-card' : 'number-of-attems-left-card'">
+                                <div *ngIf="langCode !== 'ara'"
+                                  [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-number-of-attems-arrow-shape':'number-of-attems-arrow-shape'">
+                                </div>
+                                <div *ngIf="langCode === 'ara'" style="float: right;">
+                                  <div
+                                    [ngClass]="attributeUpdateCountRemainLimit[field.attributeName] <= 0 ? 'low-ara-number-of-attems-arrow-shape':'ara-number-of-attems-arrow-shape'">
+                                  </div>
+                                </div>
+                                <div style="padding: 4px;" *ngIf="langJson && attributeUpdateCountMaxLimit" [ngClass]="langCode === 'ara' ? 'dir-rtl' :'dir-ltl'">
                                   <span
                                     style="display: block; font-weight: 600;">{{langJson.remainingAttems.replace("$remainingAttems",
                                     attributeUpdateCountRemainLimit[field.attributeName])}}</span>
@@ -279,26 +321,27 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           </tr>
                           <!-- input field for mobile view -->
                           <tr>
-                            <td class="width-of-input ele-for-mob-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                            <td class="width-of-input ele-for-mob-card"><label>{{field.labelName[langCode][1]}}</label>
+                            </td>
                           </tr>
                           <tr *ngFor="let item of buildJSONData[field.attributeName]">
-                              <td class="sub-table-row ele-for-mob-card">
-                                <span [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
-                                  <mat-select disableOptionCentering class="enable-dropdown" id="{{field.attributeName}}"
-                                    placeholder="{{field.placeHolder[item.language]}}"
-                                    [(value)]="userInputValues[field.attributeName][item.language]"
-                                    [disabled]="attributeUpdateCountRemainLimit[field.attributeName] === 0"
-                                    (selectionChange)="captureDropDownValue($event, field.attributeName, item.language,item.value)">
-                                    <mat-option *ngFor="let data of dropDownValues[field.attributeName][item.language]"
-                                      [value]="data.code">{{ data.value }}</mat-option>
-                                  </mat-select>
-                                </span>
-                                <span
-                                  *ngIf="userInputValues[field.attributeName] && i === (buildJSONData[field.attributeName]?.length -1)">
-                                  <p class="warning-message"
-                                    *ngIf="userInputValues[field.attributeName] === buildJSONData[field.attributeName][langCode]">
-                                    {{langJson.sameGenderInputErrorMsg}}</p>
-                                </span>
+                            <td class="sub-table-row ele-for-mob-card">
+                              <span [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
+                                <mat-select disableOptionCentering class="enable-dropdown" id="{{field.attributeName}}"
+                                  placeholder="{{field.placeHolder[item.language]}}"
+                                  [(value)]="userInputValues[field.attributeName][item.language]"
+                                  [disabled]="attributeUpdateCountRemainLimit[field.attributeName] === 0"
+                                  (selectionChange)="captureDropDownValue($event, field.attributeName, item.language,item.value)">
+                                  <mat-option *ngFor="let data of dropDownValues[field.attributeName][item.language]"
+                                    [value]="data.code">{{ data.value }}</mat-option>
+                                </mat-select>
+                              </span>
+                              <span
+                                *ngIf="userInputValues[field.attributeName] && i === (buildJSONData[field.attributeName]?.length -1)">
+                                <p class="warning-message"
+                                  *ngIf="userInputValues[field.attributeName] === buildJSONData[field.attributeName][langCode]">
+                                  {{langJson.sameGenderInputErrorMsg}}</p>
+                              </span>
                             </td>
                           </tr>
                           <tr *ngIf="isSameData[field.attributeName]" class="ele-for-mob-card">
@@ -307,7 +350,7 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                                 {{langJson.sameNameInputErrorMsg.replace("$NAME",langJson[field.attributeName]).replace("$NAME",langJson[field.attributeName])}}</span>
                             </td>
                           </tr>
-                           <!-- input field for mobile view -->
+                          <!-- input field for mobile view -->
                         </table>
                       </td>
                     </tr>
@@ -326,12 +369,13 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                           <tr>
                             <td class="width-of-input">
                               <mat-select disableOptionCentering class="enable-dropdown"
+                                placeholder="{{langJson.docTypePlaceholder}}"
                                 [value]="proofOfIdentity['documenttype'] ? proofOfIdentity['documenttype'] : '' "
                                 id="{{field.attributeName}}"
                                 (selectionChange)="captureDropDownValue($event, field.attributeName, supportedLanguages[0], '')">
                                 <mat-option style="min-width: 25.2rem;"
-                                  *ngFor="let data of dropDownValues[field.attributeName]"
-                                  [value]="data.code">{{ data.name }}</mat-option>
+                                  *ngFor="let data of dropDownValues[field.attributeName]" [value]="data.code">{{
+                                  data.name }}</mat-option>
                               </mat-select>
                             </td>
                             <td width="3%"></td>
@@ -340,6 +384,7 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                                 <input class="input"
                                   [value]="proofOfIdentity['documentreferenceId'] ? proofOfIdentity['documentreferenceId'] : '' "
                                   matInput #{{field.attributeName}} id="{{field.attributeName}}value"
+                                  placeholder="{{langJson.DocIDPlaceholder}}"
                                   (blur)="captureValue($event, field.attributeName, '', '')"
                                   (focus)="captureVirtualKeyboard(field.attributeName + 'value', buildJSONData.proofOfIdentity)"
                                   #keyboardRef />
@@ -356,9 +401,8 @@ <h3 class="tab-headings">{{'updatedemographic.identityHeading' | translate}}</h3
                             <td width="100%" colspan="3">
                               <div class="container" appDnd (fileDropped)="onFileDropped($event, 'POI')">
                                 <input (click)="$event.target.value=null"
-                                  [disabled]="proofOfIdentity.documenttype === undefined"
-                                  type="file" #fileDropRef id="fileDropRef"
-                                  (change)="fileBrowseHandler($event.target.files, 'POI')"
+                                  [disabled]="proofOfIdentity.documenttype === undefined" type="file" #fileDropRef
+                                  id="fileDropRef" (change)="fileBrowseHandler($event.target.files, 'POI')"
                                   accept=".pdf, .jpg, .jpeg, .png" />
                                 <label style="margin-right: 1rem;display: flex;" for="fileDropRef">
                                   <svg id="upload_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24.042"
@@ -424,7 +468,7 @@ <h4 class="name">
                                   </div>
 
                                   <div class="preview">
-                                    <img (click)="previewFile(i, 'POI')" mat-card-xs-image style="margin: 0 0 -5px 0;"
+                                    <img (click)="previewFile(i, 'POI', file.name)" mat-card-xs-image style="margin: 0 0 -5px 0;"
                                       src='./assets/icons/iconfont/visibility_on.svg' alt="" />
                                   </div>
 
@@ -467,7 +511,9 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                             <tr>
                               <td class="width-of-input"><label>{{field.labelName[langCode][0]}}</label></td>
                               <td width="3%" class="ele-for-lap-tab-card"></td>
-                              <td class="width-of-input ele-for-lap-tab-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                              <td class="width-of-input ele-for-lap-tab-card">
+                                <label>{{field.labelName[langCode][1]}}</label>
+                              </td>
                             </tr>
                             <tr *ngFor="let item of buildJSONData[field.attributeName] let i = index"
                               [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
@@ -476,7 +522,7 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                                   readonly="true" disabled="true" [value]="item.value">
                               </td>
                               <td class="sub-table-row ele-for-lap-tab-card" width="3%"></td>
-                              <td class="sub-table-row width-of-input ele-for-lap-tab-card" >
+                              <td class="sub-table-row width-of-input ele-for-lap-tab-card">
                                 <div class="search-input-card">
                                   <input class="input" matInput #{{field.attributeName}}
                                     id="{{field.attributeName}}{{item.language}}"
@@ -506,14 +552,14 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                               <td class="sub-table-row width-of-input">
                                 <div class="search-input-card">
                                   <input class="input" matInput #{{field.attributeName}}
-                                    id="{{field.attributeName}}{{item.language}}"
+                                    id="{{field.attributeName}}{{item.language}}Mobile"
                                     (blur)="captureAddressValue($event, field.attributeName, item.language, item.value)"
                                     [(value)]="userInputValues[field.attributeName][item.language]"
                                     [placeholder]="field.placeHolder[item.language]"
-                                    (focus)="captureVirtualKeyboard(field.attributeName+item.language, item.index)"
+                                    (focus)="captureVirtualKeyboard(field.attributeName+item.language+'Mobile', item.mobileIndex)"
                                     #keyboardRef />
                                   <i matSuffix class="material-icons mat-keyboard-icon"
-                                    (click)="openKeyboard(field.attributeName+item.language, item.language)">keyboard</i>
+                                    (click)="openKeyboard(field.attributeName+item.language+'Mobile', item.language)">keyboard</i>
                                 </div>
                               </td>
                             </tr>
@@ -533,32 +579,31 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                             <tr>
                               <td class="width-of-input"><label>{{field.labelName[langCode][0]}}</label></td>
                               <td width="3%" class="ele-for-lap-tab-card"></td>
-                              <td class="width-of-input ele-for-lap-tab-card"><label>{{field.labelName[langCode][1]}}</label></td>
+                              <td class="width-of-input ele-for-lap-tab-card">
+                                <label>{{field.labelName[langCode][1]}}</label>
+                              </td>
                             </tr>
                             <ng-container *ngIf="typeOf(userInfo[field.attributeName]) !== 'string'">
                               <tr *ngFor="let item of buildJSONData[field.attributeName], let i = index">
-                                <td class="sub-table-row each-Hierarchy-td width-of-input">
-                                  <input *ngIf="buildJSONData[field.attributeName]"  type="text" class="readonly"
+                                <td class="sub-table-row each-Hierarchy-td width-of-input" >
+                                  <input [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'" *ngIf="buildJSONData[field.attributeName]" type="text" class="readonly"
                                     readonly="true" disabled="true" [value]="item.value">
                                 </td>
                                 <td class="sub-table-row ele-for-lap-tab-card" width="3%"></td>
-                                <td  class="sub-table-row each-Hierarchy-td width-of-input ele-for-lap-tab-card"
-                                *ngIf="dynamicDropDown[field.name]">
-                                <span [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
-                                  <mat-select disableOptionCentering
-                                    placeholder="{{field.placeHolder[item.language]}}"
-                                    [ngClass]="dynamicDropDown[field.name]?.length === 0 ? 'disable-dropdown' : 'enable-dropdown'"
-                                    [(value)]="userInputValues[field.attributeName][item.language]"
-                                    id="{{field.name}}{{item.language}}"
-                                    (selectionChange)="loadLocationDataDynamically($event, field.locationHierarchyLevel,field.attributeName,typeOf(userInfo[field.attributeName]))">
-                                    <mat-option *ngFor="let data of dynamicDropDown[field.name][item.language]" [value]="data.code">
-                                      {{ data.name }}
-                                    </mat-option>
-                                  </mat-select>
-                                </span>
-                                  <span *ngIf="locationFieldNameList?.length">
-                                    <p *ngIf="locationFieldNameList[field.locationHierarchyLevel-1] === fieldName && i === (buildJSONData[field.attributeName]?.length -1)"
-                                      class="warning-message">{{langJson.EnterAllAddress}} {{fieldName}}</p>
+                                <td class="sub-table-row each-Hierarchy-td width-of-input ele-for-lap-tab-card"
+                                  *ngIf="dynamicDropDown[field.name]">
+                                  <span [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
+                                    <mat-select disableOptionCentering
+                                      placeholder="{{field.placeHolder[item.language]}}"
+                                      [ngClass]="dynamicDropDown[field.name]?.length === 0 ? 'disable-dropdown' : 'enable-dropdown'"
+                                      [(value)]="userInputValues[field.attributeName][item.language]"
+                                      id="{{field.name}}{{item.language}}"
+                                      (selectionChange)="loadLocationDataDynamically($event, field.locationHierarchyLevel,field.attributeName,typeOf(userInfo[field.attributeName]))">
+                                      <mat-option *ngFor="let data of dynamicDropDown[field.name][item.language]"
+                                        [value]="data.code">
+                                        {{ data.name }}
+                                      </mat-option>
+                                    </mat-select>
                                   </span>
                                 </td>
                               </tr>
@@ -580,9 +625,16 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                                     {{ data.name }}
                                   </mat-option>
                                 </mat-select>
+                              </td>
+                            </tr>
+                            <tr class="ele-for-lap-tab-card">
+                              <td></td>
+                              <td></td>
+                              <td>
                                 <span *ngIf="locationFieldNameList?.length">
-                                  <p *ngIf="locationFieldNameList[field.locationHierarchyLevel-1] === fieldName"
-                                    class="warning-message">{{langJson.EnterAllAddress}} {{fieldName}}</p>
+                                  <p *ngIf="locationFieldNameList[field.locationHierarchyLevel-1] === fieldName && field.locationHierarchyLevel > 1"
+                                    class="warning-message">{{langJson.EnterAllAddress}} {{field.placeHolder[langCode]}}
+                                  </p>
                                 </span>
                               </td>
                             </tr>
@@ -592,24 +644,26 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                               <td class="width-of-input"><label>{{field.labelName[langCode][1]}}</label></td>
                             </tr>
                             <tr *ngIf="typeOf(userInfo[field.attributeName]) !== 'string'">
-                              <td class="ele-for-mob-card" *ngFor="let item of buildJSONData[field.attributeName], let i = index">
-                                <span  class="sub-table-row each-Hierarchy-td"
-                                *ngIf="dynamicDropDown[field.name]">
-                                <span [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
-                                  <mat-select disableOptionCentering
-                                    placeholder="{{field.placeHolder[item.language]}}"
-                                    [ngClass]="dynamicDropDown[field.name]?.length === 0 ? 'disable-dropdown' : 'enable-dropdown'"
-                                    [(value)]="userInputValues[field.attributeName][item.language]"
-                                    id="{{field.name}}{{item.language}}"
-                                    (selectionChange)="loadLocationDataDynamically($event, field.locationHierarchyLevel,field.attributeName,typeOf(userInfo[field.attributeName]))">
-                                    <mat-option *ngFor="let data of dynamicDropDown[field.name][item.language]" [value]="data.code">
-                                      {{ data.name }}
-                                    </mat-option>
-                                  </mat-select>
-                                </span>
+                              <td class="ele-for-mob-card"
+                                *ngFor="let item of buildJSONData[field.attributeName], let i = index">
+                                <span class="sub-table-row each-Hierarchy-td" *ngIf="dynamicDropDown[field.name]">
+                                  <span [ngClass]="item.language === 'ara' ? 'dir-rtl' :'dir-ltl'">
+                                    <mat-select disableOptionCentering
+                                      placeholder="{{field.placeHolder[item.language]}}"
+                                      [ngClass]="dynamicDropDown[field.name]?.length === 0 ? 'disable-dropdown' : 'enable-dropdown'"
+                                      [(value)]="userInputValues[field.attributeName][item.language]"
+                                      id="{{field.name}}{{item.language}}"
+                                      (selectionChange)="loadLocationDataDynamically($event, field.locationHierarchyLevel,field.attributeName,typeOf(userInfo[field.attributeName]))">
+                                      <mat-option *ngFor="let data of dynamicDropDown[field.name][item.language]"
+                                        [value]="data.code">
+                                        {{ data.name }}
+                                      </mat-option>
+                                    </mat-select>
+                                  </span>
                                   <span *ngIf="locationFieldNameList?.length">
-                                    <p *ngIf="locationFieldNameList[field.locationHierarchyLevel-1] === fieldName && i === (buildJSONData[field.attributeName]?.length -1)"
-                                      class="warning-message">{{langJson.EnterAllAddress}} {{fieldName}}</p>
+                                    <p *ngIf="locationFieldNameList[field.locationHierarchyLevel-1] === fieldName && i === (buildJSONData[field.attributeName]?.length -1) && field.locationHierarchyLevel > 1"
+                                      class="warning-message">{{langJson.EnterAllAddress}}
+                                      {{field.placeHolder[langCode]}}</p>
                                   </span>
                                 </span>
                               </td>
@@ -628,7 +682,8 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                                 </mat-select>
                                 <span *ngIf="locationFieldNameList?.length">
                                   <p *ngIf="locationFieldNameList[field.locationHierarchyLevel-1] === fieldName"
-                                    class="warning-message">{{langJson.EnterAllAddress}} {{fieldName}}</p>
+                                    class="warning-message">{{langJson.EnterAllAddress}} {{field.placeHolder[langCode]}}
+                                  </p>
                                 </span>
                               </td>
                             </tr>
@@ -652,6 +707,7 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                               <td class="width-of-input">
                                 <mat-select disableOptionCentering class="enable-dropdown"
                                   [value]="proofOfAddress['documenttype'] ? proofOfAddress['documenttype'] : '' "
+                                  placeholder="{{langJson.docTypePlaceholder}}"
                                   id="{{field.attributeName}}">
                                   <mat-option style="min-width: 25.2rem;"
                                     *ngFor="let data of dropDownValues[field.attributeName]"
@@ -666,6 +722,7 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                                   <input class="input"
                                     [value]="proofOfAddress['documentreferenceId'] ? proofOfAddress['documentreferenceId'] : '' "
                                     matInput #{{field.attributeName}} id="{{field.attributeName}}value"
+                                    placeholder="{{langJson.DocIDPlaceholder}}"
                                     (blur)="captureAddressValue($event, field.attributeName, '')"
                                     (focus)="captureVirtualKeyboard(field.attributeName, buildJSONData.proofOfAddress)"
                                     #keyboardRef />
@@ -682,9 +739,8 @@ <h3 class="tab-headings">{{'updatedemographic.addressHeading' | translate}}</h3>
                               <td width="100%" colspan="3">
                                 <div class="container" appDnd (fileDropped)="onFileDropped($event, 'POA')">
                                   <input (click)="$event.target.value=null"
-                                    [disabled]="proofOfAddress.documenttype === undefined"
-                                    type="file" #fileAddRef id="fileAddRef"
-                                    (change)="fileBrowseHandler($event.target.files, 'POA')"
+                                    [disabled]="proofOfAddress.documenttype === undefined" type="file" #fileAddRef
+                                    id="fileAddRef" (change)="fileBrowseHandler($event.target.files, 'POA')"
                                     accept=".pdf, .jpg, .jpeg, .png" />
                                   <label style="margin-right: 1rem;display: flex;" for="fileAddRef">
                                     <svg id="upload_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24.042"
@@ -749,7 +805,7 @@ <h4 class="name">
                                       <app-progress [progress]="file?.progress"></app-progress>
                                     </div>
                                     <div class="preview">
-                                      <img (click)="previewFile(i, 'POA')" mat-card-xs-image style="margin: 0 0 -5px 0;"
+                                      <img (click)="previewFile(i, 'POA',file.name)" mat-card-xs-image style="margin: 0 0 -5px 0;"
                                         src='./assets/icons/iconfont/visibility_on.svg' alt="" />
                                     </div>
                                     <div class="delete" (click)="deleteFile(i, 'POA')">
@@ -781,81 +837,79 @@ <h4 class="name">
       <mat-tab label="{{'updatedemographic.contact' | translate}}">
         <h3 class="tab-headings">{{'updatedemographic.contactHeading' | translate}}</h3>
         <div *ngFor="let field of schema['identity']; let i = index" dir="{{sitealignment}}">
-          <mat-grid-list *ngIf="field.tabgroup === 'contact'" [cols]="cols" rowHeight="100px" gutterSize="7px">
-            <mat-grid-tile class="mat-form1" *ngIf="buildJSONData[field.attributeName]">
-              <div class="mini-card" *ngIf="field.controlType === 'textbox'">
-                <mat-card-header><mat-card-title>{{field.labelName[langCode][0]}}</mat-card-title></mat-card-header>
-                <mat-card-subtitle><input type="text" class="readonly" readonly="true" disabled="true"
-                    [value]="buildJSONData[field.attributeName].value"></mat-card-subtitle>
+          <div class="contact-update-card" *ngIf="field.tabgroup === 'contact'" gutterSize="7px">
+            <div class="contact-update-sub-card">
+              <div class="contact-update-each-sub-card">
+                <mat-card-subtitle class="contact-lable">{{field.labelName[langCode][0]}}</mat-card-subtitle>
+                <input type="text" class="readonly" readonly="true" disabled="true"
+                  [value]="buildJSONData[field.attributeName].value">
+              </div>
+              <div class="contact-update-each-sub-card">
+                <mat-card-subtitle class="contact-lable">{{field.labelName[langCode][1]}}</mat-card-subtitle>
+                <div class="search-input-card" *ngIf="field.attributeName === 'email'">
+                  <input class="input" [value]="userIdEmail" matInput type="password" #{{field.attributeName}}
+                    id="{{field.attributeName}}" (input)="captureContactValue($event, field.attributeName)"
+                    [placeholder]="field.placeHolder[langCode]"
+                    (blur)="captureContactValue($event, field.attributeName)"
+                    (focus)="captureVirtualKeyboard(field.attributeName, buildJSONData[field.attributeName].index)"
+                    #keyboardRef />
+                  <i matSuffix class="material-icons mat-keyboard-icon"
+                    (click)="openKeyboard(field.attributeName)">keyboard</i>
+                </div>
+                <div class="search-input-card" *ngIf="field.attributeName === 'phone'">
+                  <input class="input" [value]="userIdPhone" matInput type="password" #{{field.attributeName}}
+                    id="{{field.attributeName}}" (input)="captureContactValue($event, field.attributeName)"
+                    [placeholder]="field.placeHolder[langCode]"
+                    (blur)="captureContactValue($event, field.attributeName)"
+                    (focus)="captureVirtualKeyboard(field.attributeName, buildJSONData[field.attributeName].index)"
+                    #keyboardRef />
+                  <i matSuffix class="material-icons mat-keyboard-icon"
+                    (click)="openKeyboard(field.attributeName)">keyboard</i>
+                </div>
               </div>
-            </mat-grid-tile>
-            <mat-grid-tile class="mat-form1">
-              <div class="mini-card" *ngIf="field.tabgroup === 'contact' && field.controlType === 'textbox'">
-                <mat-card-header><mat-card-title>{{field.labelName[langCode][1]}}</mat-card-title></mat-card-header>
-                <mat-card-subtitle>
+            </div>
+            <div class="contact-update-sub-card">
+              <div class="contact-update-each-sub-card">
+                <mat-card-subtitle class="contact-lable">{{field.labelName[langCode][2]}}</mat-card-subtitle>
+                <div style="display: flex;">
                   <div class="search-input-card" *ngIf="field.attributeName === 'email'">
-                    <input class="input" [value]="userIdEmail" matInput type="password" #{{field.attributeName}}
-                      id="{{field.attributeName}}" (input)="captureContactValue($event, field.attributeName)"
+                    <input class="input" [value]="confirmEmailContact"
+                      (input)="captureConfirmValue($event,field.attributeName)"
+                      (blur)="captureConfirmValue($event,field.attributeName)"
                       [placeholder]="field.placeHolder[langCode]"
-                      (blur)="captureContactValue($event, field.attributeName)"
-                      (focus)="captureVirtualKeyboard(field.attributeName, buildJSONData[field.attributeName].index)"
-                      #keyboardRef />
+                      (focus)="captureVirtualKeyboard('confirm' + field.attributeName, buildJSONData[field.attributeName].confIndex)"
+                      matInput #confirmemail #input id="confirm{{field.attributeName}}" #keyboardRef />
                     <i matSuffix class="material-icons mat-keyboard-icon"
-                      (click)="openKeyboard(field.attributeName)">keyboard</i>
+                      (click)="openKeyboard('confirm' + field.attributeName)">keyboard</i>
                   </div>
                   <div class="search-input-card" *ngIf="field.attributeName === 'phone'">
-                    <input class="input" [value]="userIdPhone" matInput type="password" #{{field.attributeName}}
-                      id="{{field.attributeName}}" (input)="captureContactValue($event, field.attributeName)"
+                    <input class="input" [value]="confirmPhoneContact"
+                      (input)="captureConfirmValue($event,field.attributeName)"
                       [placeholder]="field.placeHolder[langCode]"
-                      (blur)="captureContactValue($event, field.attributeName)"
-                      (focus)="captureVirtualKeyboard(field.attributeName, buildJSONData[field.attributeName].index)"
-                      #keyboardRef />
+                      (blur)="captureConfirmValue($event,field.attributeName)"
+                      (focus)="captureVirtualKeyboard('confirm' + field.attributeName, buildJSONData[field.attributeName].confIndex)"
+                      matInput #confirmphone id="confirm{{field.attributeName}}" #keyboardRef />
                     <i matSuffix class="material-icons mat-keyboard-icon"
-                      (click)="openKeyboard(field.attributeName)">keyboard</i>
+                      (click)="openKeyboard('confirm' + field.attributeName)">keyboard</i>
                   </div>
-                </mat-card-subtitle>
-              </div>
-            </mat-grid-tile>
-            <mat-grid-tile class="mat-form1">
-              <div class="mini-card" *ngIf="field.tabgroup === 'contact' && field.controlType === 'textbox'">
-                <mat-card-header><mat-card-title>{{field.labelName[langCode][2]}}</mat-card-title></mat-card-header>
-
-                <div class="search-input-card" *ngIf="field.attributeName === 'email'">
-                  <input class="input" [value]="confirmEmailContact"
-                    (input)="captureConfirmValue($event,field.attributeName)"
-                    (blur)="captureConfirmValue($event,field.attributeName)" [placeholder]="field.placeHolder[langCode]"
-                    (focus)="captureVirtualKeyboard('confirm' + field.attributeName, buildJSONData[field.attributeName].confIndex)"
-                    matInput #confirmemail #input id="confirm{{field.attributeName}}" #keyboardRef />
-                  <i matSuffix class="material-icons mat-keyboard-icon"
-                    (click)="openKeyboard('confirm' + field.attributeName)">keyboard</i>
                 </div>
-                <div class="search-input-card" *ngIf="field.attributeName === 'phone'">
-                  <input class="input" [value]="confirmPhoneContact"
-                    (input)="captureConfirmValue($event,field.attributeName)"
-                    [placeholder]="field.placeHolder[langCode]" (blur)="captureConfirmValue($event,field.attributeName)"
-                    (focus)="captureVirtualKeyboard('confirm' + field.attributeName, buildJSONData[field.attributeName].confIndex)"
-                    matInput #confirmphone id="confirm{{field.attributeName}}" #keyboardRef />
-                  <i matSuffix class="material-icons mat-keyboard-icon"
-                    (click)="openKeyboard('confirm' + field.attributeName)">keyboard</i>
-                </div>
-                <p *ngIf="showNotMatchedMessageEmail && (field.attributeName === contactTye) && field.attributeName === 'email' "
-                  class="warning-message-for-contact">
-                  {{langJson.enteredValuesNotMatch}}</p>
-                <p *ngIf="showNotMatchedMessagePhone && (field.attributeName === contactTye) && field.attributeName === 'phone' "
-                  class="warning-message-for-contact">
-                  {{langJson.enteredValuesNotMatch}}</p>
+                <span *ngIf="showNotMatchedMessageEmail && (field.attributeName === contactTye) && field.attributeName === 'email' "
+                class="warning-message-for-contact">
+                {{langJson.enteredValuesNotMatch}}</span>
+              <span *ngIf="showNotMatchedMessagePhone && (field.attributeName === contactTye) && field.attributeName === 'phone' "
+                class="warning-message-for-contact">
+                {{langJson.enteredValuesNotMatch}}</span>
               </div>
-            </mat-grid-tile>
-            <mat-grid-tile class="mat-form1">
-              <div class="mini-card" *ngIf="field.tabgroup === 'contact' && field.controlType === 'textbox'">
-                <mat-card-header></mat-card-header>
+              <div class="contact-update-each-sub-card"
+                *ngIf="field.tabgroup === 'contact' && field.controlType === 'textbox'">
+                <mat-card-subtitle class="contact-lable"></mat-card-subtitle>
                 <button class="contact-send-otp-btn"
                   [disabled]="sendOtpDisable || !(field.attributeName === contactTye)"
                   (click)="sendOTPBtn(field.attributeName)" mat-raised-button color="primary"
                   id="sendOTP{{field.attributeName}}">{{field.labelName[langCode][3]}}</button>
               </div>
-            </mat-grid-tile>
-          </mat-grid-list>
+            </div>
+          </div>
         </div>
       </mat-tab>
       <mat-tab label="{{'updatedemographic.languagePreference' | translate}}" class="language-card">
@@ -877,19 +931,19 @@ <h3 class="tab-headings">{{'updatedemographic.languageHeading' | translate}}</h3
                 <div class="mini-card"
                   *ngIf="field.tabgroup === 'notificationLanguage' && field.controlType === 'dropdown'">
                   <mat-card-header><mat-card-title>{{field.labelName[langCode][1]}}</mat-card-title></mat-card-header>
-
                   <mat-select [placeholder]="field.placeHolder[langCode]" disableOptionCentering class="enable-dropdown"
-                    [(ngModel)]="selected2" id="{{field.attributeName}}">
-                    <mat-option *ngFor="let data of newNotificationLanguages"
-                      (onSelectionChange)="capturePerfLang($event, field.attributeName)"
-                      [value]="data.code">{{ data.name }}</mat-option>
+                    [(ngModel)]="selected2" id="{{field.attributeName}}"
+                    (selectionChange)="capturePerfLang($event, field.attributeName)">
+                    <mat-option *ngFor="let data of newNotificationLanguages" [value]="data.name">{{ data.name
+                      }}</mat-option>
                   </mat-select>
                 </div>
               </mat-grid-tile>
             </mat-grid-list>
-            <div style="text-align: end;margin-right: 2rem; margin-top: none;" *ngIf="langJson">
-              <button mat-raised-button (click)="updatenotificationLanguage()" color="primary"
-                id="submit">{{langJson.submit}}</button>
+            <div [ngClass]="langCode === 'ara' ? 'perLang-submit-btn-card-ara' :'perLang-submit-btn-card'"
+              *ngIf="langJson">
+              <button [disabled]="!userPrefLang[field.attributeName]" mat-raised-button
+                (click)="updatenotificationLanguage()" color="primary" id="submit">{{langJson.submit}}</button>
             </div>
           </div>
         </div>
@@ -925,11 +979,11 @@ <h3 class="tab-headings">{{'updatedemographic.languageHeading' | translate}}</h3
                 </td>
               </tr>
               <tr *ngIf="typeOf(item.newData) === 'string' && item.newData">
-                <td *ngIf="item.labelName === 'New DOB'">
+                <td *ngIf="item.newData?.includes('/')">
                   <input style="color: #000000;" type="text" class="readonly" readonly="true" disabled="true"
                     [value]="item.newData | date:'dd/MMM/yyyy'">
                 </td>
-                <td *ngIf="item.labelName !== 'New DOB'">
+                <td *ngIf="!item.newData?.includes('/')">
                   <input style="color: #000000;" type="text" class="readonly" readonly="true" disabled="true"
                     [value]="item.newData">
                 </td>
@@ -938,7 +992,7 @@ <h3 class="tab-headings">{{'updatedemographic.languageHeading' | translate}}</h3
           </div>
         </div>
         <div class="files-list">
-          <mat-card-title class="files-list-title">{{langJson.documentUploaded}}...</mat-card-title>
+          <mat-card-title class="files-list-title">{{langJson.documentUploaded}}</mat-card-title>
           <div class="preview-input-size">
             <div class="uploaded-single-file" *ngFor="let file of uploadedFiles; let i = index">
               <div class="file-icon" style="width: 50px">
@@ -972,7 +1026,7 @@ <h4 class="name">
               </div>
 
               <div class="preview">
-                <img *ngIf="file.name !== selectedFileInPreviewPage" (click)="previewFileInPreviewPage(i)"
+                <img *ngIf="file.name !== selectedFileInPreviewPage" (click)="previewFileInPreviewPage(i,file.name)"
                   mat-card-xs-image style="margin: 0 0 -5px 0;" src='./assets/icons/iconfont/visibility_on.svg'
                   alt="" />
               </div>
diff --git a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.ts b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.ts
index eb5021db..d08e8850 100644
--- a/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.ts
+++ b/resident-ui/src/app/feature/uinservices/updatedemographic/updatedemographic.component.ts
@@ -163,12 +163,6 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
         this.matTabLabel = response.updatedemographic.identity;
       });
 
-    let supportedLanguages = this.appConfigService.getConfig()['supportedLanguages'].split(',');
-    supportedLanguages.forEach(data => {
-      let newObj = { "code": data, "name": this.defaultJsonValue['languages'][data]['nativeName'] }
-      this.newNotificationLanguages.push(newObj)
-    })
-
     this.getUpdateMyDataSchema();
     this.getUserInfo();
     await this.getMappingData();
@@ -210,7 +204,7 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
           this.schema = response;
         });
     })
-   
+  
   }
 
 
@@ -227,6 +221,7 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
           if (this.schema && this.userInfo) {
             this.buildData()
             this.isLoading = false;
+            this.getSupportingLanguages()
           } else {
             this.getUpdateMyDataSchema();
             this.getUserInfo();
@@ -237,6 +232,16 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
       });
   }
 
+  getSupportingLanguages(){
+    let supportedLanguages = this.appConfigService.getConfig()['supportedLanguages'].split(',');
+    supportedLanguages.forEach(data => {
+      if(this.defaultJsonValue['languages'][data]['nativeName'] !== this.userInfo.preferredLang){
+        let newObj = { "code": data, "name": this.defaultJsonValue['languages'][data]['nativeName'] }
+        this.newNotificationLanguages.push(newObj)
+      }
+    })
+  }
+
   async getMappingData(){
     this.dataStorageService.getMappingData().subscribe((response) =>{
       if(response){
@@ -278,6 +283,11 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
                 this.userInputValues[schema.attributeName][item.language] = '';
                 return item
               })
+              this.buildJSONData[schema.attributeName] = self.userInfo[schema.attributeName].map(item =>{
+                item.mobileIndex = count
+                count++
+                return item
+              })
             }
           }else{
             this.buildJSONData[schema.attributeName] = count
@@ -700,9 +710,9 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
   }
 
   captureContactValue(event: any, formControlName: any) {
-    this.userId = event.target.value;
+    this.sendOtpDisable = true
+    this.userId = event.target.value.trim();
     this.contactTye = formControlName;
-
     if (formControlName === "email" && this.userId) {
       this.userIdEmail = this.userId.toLowerCase();
       this.sendOtpDisable = this.userIdEmail === this.confirmEmailContact ? false : true;
@@ -710,7 +720,6 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
       this.userIdPhone = this.userId;
       this.sendOtpDisable = this.userIdPhone === this.confirmPhoneContact ? false : true;
     }
-
     if (this[formControlName]) {
       if (formControlName === "email") {
         this.showNotMatchedMessageEmail = this.userIdEmail === this.confirmEmailContact ? false : true;
@@ -721,14 +730,14 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
   }
 
   captureConfirmValue(event: any, formControlName: any) {
-    this[formControlName] = event.target.value;
+    this.sendOtpDisable = true
+    this[formControlName] = event.target.value.trim();
     this.contactTye = formControlName;
-
-    if (formControlName === "email") {
+    if (formControlName === "email" && this[formControlName]) {
       this.confirmEmailContact = event.target.value.toLowerCase();
       this.showNotMatchedMessageEmail = this.userIdEmail === this.confirmEmailContact ? false : true;
       this.sendOtpDisable = this.userIdEmail === this.confirmEmailContact ? false : true;
-    } else if (formControlName === "phone") {
+    } else if (formControlName === "phone" && this[formControlName]) {
       this.confirmPhoneContact = event.target.value;
       this.showNotMatchedMessagePhone = this.userIdPhone === this.confirmPhoneContact ? false : true;
       this.sendOtpDisable = this.userIdPhone === this.confirmPhoneContact ? false : true;
@@ -736,25 +745,23 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
   }
 
   capturePerfLang(event: any, formControlName: string) {
-    this.userInputValues[formControlName] = event.source.viewValue;
-    this.userPrefLang[formControlName] = event.source.viewValue;
+    this.userPrefLang[formControlName] = event.value;
   }
 
   captureVirtualKeyboard(element: HTMLElement, index: number) {
-
     if (this.keyboardRef) {
       this.keyboardRef.instance.setInputInstance(this.attachToElementMesOne._results[index]);
     }
-
   }
 
   openKeyboard(inputId: any, langCode: string) {
+    let finalLangCode = langCode ? langCode : "eng"
     if (this.oldKeyBoradIndex === inputId && this.keyboardService.isOpened) {
       this.keyboardService.dismiss();
       this.keyboardRef = undefined;
     } else {
       this.oldKeyBoradIndex = inputId;
-      this.keyboardRef = this.keyboardService.open(defaultJson.keyboardMapping[langCode]);
+      this.keyboardRef = this.keyboardService.open(defaultJson.keyboardMapping[finalLangCode]);
       document.getElementById(inputId).focus();
     }
   }
@@ -790,7 +797,7 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
     };
     this.dataStorageService.updateuin(request).subscribe(response => {
       let eventId = response.headers.get("eventid");
-      this.message = this.popupMessages.genericmessage.updateMyData.newDataUpdatedSuccessMsg.replace("$eventId", eventId)
+      this.message = this.popupMessages.genericmessage.updateMyData.newDataUpdatedSuccessMsg.replace("$eventId", eventId).replace("$dataType", this.langJson[this.updatingtype].toLowerCase())
       if (response.body["response"]) {
         this.isLoading = false;
         this.showMessage(this.message, eventId);
@@ -827,7 +834,7 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
     };
     this.dataStorageService.updateuin(request).subscribe(response => {
       let eventId = response.headers.get("eventid")
-      this.message = this.popupMessages.genericmessage.updateMyData.newDataUpdatedSuccessMsg.replace("$eventId", eventId)
+      this.message = this.popupMessages.genericmessage.updateMyData.updateNotificationData.replace("$eventId", eventId)
       if (response.body["response"]) {
         this.showMessage(this.message, eventId);
         this.router.navigate(['uinservices/dashboard']);
@@ -884,29 +891,29 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
    * Preview file from files list
    * @param index (File index)
    */
-  previewFile(index: number, type: string) {
+  previewFile(index: number, type: string,fileName:string) {
     if (type === "POI") {
       const reader = new FileReader();
       reader.onload = (e: any) => {
         this.pdfSrc = e.target.result;
-        this.showPreviewImage(this.pdfSrc)
+        this.showPreviewImage(this.pdfSrc, fileName)
       };
       reader.readAsDataURL(this.files[index]);
     } else {
       const reader = new FileReader();
       reader.onload = (e: any) => {
         this.pdfSrcPOA = e.target.result;
-        this.showPreviewImage(this.pdfSrcPOA)
+        this.showPreviewImage(this.pdfSrcPOA,fileName)
       };
       reader.readAsDataURL(this.filesPOA[index]);
     }
   }
 
-  previewFileInPreviewPage(index: number) {
+  previewFileInPreviewPage(index: number,fileName:string) {
     const reader = new FileReader();
     reader.onload = (e: any) => {
       this.pdfSrcInPreviewPage = e.target.result;
-      this.showPreviewImage(this.pdfSrcInPreviewPage)
+      this.showPreviewImage(this.pdfSrcInPreviewPage,fileName)
     };
     reader.readAsDataURL(this.uploadedFiles[index]);
   }
@@ -1105,13 +1112,14 @@ export class UpdatedemographicComponent implements OnInit, OnDestroy {
     }, 400)
   }
 
-  showPreviewImage(pdfSrc: any) {
+  showPreviewImage(pdfSrc: any,fileName:string) {
     this.dialog
       .open(DialogComponent, {
         width: '70%',
         data: {
           case: 'previewImage',
-          imageLink: pdfSrc
+          imageLink: pdfSrc,
+          fileName
         },
         disableClose: true
       });
diff --git a/resident-ui/src/app/shared/dialog/dialog.component.css b/resident-ui/src/app/shared/dialog/dialog.component.css
index 3d1244b2..fe43d209 100644
--- a/resident-ui/src/app/shared/dialog/dialog.component.css
+++ b/resident-ui/src/app/shared/dialog/dialog.component.css
@@ -303,7 +303,7 @@ p{
 }
 
 .share-btn {
-  width: 100px;
+  min-width: 100px;
   height: 36px;
   border-radius: 5px;
   border: none;
@@ -412,4 +412,11 @@ p{
   background-color: #FFD9D8; 
   color: red; 
   border-radius: 8px;
+}
+
+.preview-file-name-card{
+  display: flex; 
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 4px 0 4px;
 }
\ No newline at end of file
diff --git a/resident-ui/src/app/shared/dialog/dialog.component.html b/resident-ui/src/app/shared/dialog/dialog.component.html
index 8f26bed0..54cca0d7 100644
--- a/resident-ui/src/app/shared/dialog/dialog.component.html
+++ b/resident-ui/src/app/shared/dialog/dialog.component.html
@@ -280,8 +280,7 @@ <h4>{{ input.title }}</h4>
         <p class="agree-text">{{input.agreeLabel}}</p>
       </div>
       <button [disabled]="isChecked" mat-button [style.background]=" isChecked ? '#909090':'#03A64A' "
-        [style.color]="'#ffffff'" (click)="shareInfoForUpdateMyData(input.id)" class="share-btn">{{ input.btnTxt
-        }}</button>
+      [style.color]="'#ffffff'" (click)="shareInfoForUpdateMyData(input.id)" class="share-btn">{{ input.btnTxt}}</button>
     </div>
   </div>
 
@@ -339,7 +338,7 @@ <h4>{{ input.title }}</h4>
       <br />
       <label class="label-text" for="otp-input">{{'verifyuinvid.inputLabel' | translate}}</label>
       <br />
-      <input [disabled]="disableInput" #box (keyup)="getInputValues(box.value)" placeholder="Enter OTP here" id="otp-input"
+      <input [disabled]="disableInput" #box (keyup)="getInputValues(box.value)" placeholder="{{'verifyuinvid.otp' | translate}}" id="otp-input"
         class="enter-opt-input" type="text" />
       <div class="otp-infromation-card">
         <p class="otp-infromation-text">{{input.message}}<span class="mobile-number">
@@ -360,8 +359,11 @@ <h4>{{ input.title }}</h4>
   
   <!-- show preview image -->
   <div style="height: 50%;" *ngIf="input.case === 'previewImage'">
-    <div (click)="dismiss()" width="100%" style="float: right;cursor: pointer;">
-      <mat-icon matTooltip="Close Preview">clear</mat-icon>
+    <div width="100%" class="preview-file-name-card" >
+      <p>{{input.fileName}}</p>
+      <span (click)="dismiss()" style="cursor: pointer;">
+        <mat-icon matTooltip="Close Preview">clear</mat-icon>
+      </span>
     </div>
     <embed *ngIf="input.imageLink" [src]="input.imageLink | sanitizepdf" width="100%" height="500px">
   </div>
diff --git a/resident-ui/src/assets/i18n/ara.json b/resident-ui/src/assets/i18n/ara.json
index a57953bf..cbc1aad6 100644
--- a/resident-ui/src/assets/i18n/ara.json
+++ b/resident-ui/src/assets/i18n/ara.json
@@ -409,7 +409,7 @@
         "sameNameInputErrorMsg": "ال$NAME الذي أدخلته موجود بالفعل. الرجاء إدخال $NAME جديد للمتابعة.",
         "sameDobInputErrorMsg": "تاريخ الميلاد الذي أدخلته موجود بالفعل. يرجى إدخال تاريخ ميلاد جديد للمتابعة.",
         "sameGenderInputErrorMsg": "الجنس الذي اخترته موجود بالفعل. يرجى اختيار جنس جديد للمتابعة.",
-        "EnterAllAddress": "الرجاء التحديد",
+        "EnterAllAddress": "لو سمحت ",
         "select": "يختار",
         "remainingAttems": "$remainingAttems محاولات متبقية",
         "maxAttems": "$Name يمكن تقديم طلب تغيير الاسم مرات كحد أقصى $MaxAttems.",
@@ -417,10 +417,10 @@
         "dateOfBirth": "تاريخ الميلاد",
         "gender": "الجنس",
         "addressLine1":"العنوان",
-        "sameFileUploading":"يرجى تحميل الملف باستخدام اسم ملف مختلف."
-    },
-    "preview": {
-        "title": "معاينة"
+        "sameFileUploading":"يرجى تحميل الملف باستخدام اسم ملف مختلف.",
+        "docTypePlaceholder": "اختر نوع المستند",
+        "DocIDPlaceholder": "أدخل معرف المستند"
+
     },
     "trackservicerequest": {
         "title": "تتبع طلباتي",
@@ -613,7 +613,8 @@
         "updateMyData": {
             "emailSuccessMsg": "تم تحديث عنوان بريدك الإلكتروني بنجاح ضد رقم الحدث: $eventId.",
             "phoneNumberSuccessMsg": "تم تحديث رقم هاتفك بنجاح ضد رقم الحدث: $eventId.",
-            "newDataUpdatedSuccessMsg": "تم تقديم طلبك لتغيير بياناتك بنجاح ضد رقم الحدث: $eventId."
+            "newDataUpdatedSuccessMsg": "تم تقديم طلبك لتغيير بيانات $dataType ضد معرّف الحدث: $eventId.",
+            "updateNotificationData": "تم تقديم طلبك لتغيير لغة الإشعارات ضد معرّف الحدث: $eventId."
         }
     },
     "autologout": {
diff --git a/resident-ui/src/assets/i18n/eng.json b/resident-ui/src/assets/i18n/eng.json
index bd383f00..112bcbde 100644
--- a/resident-ui/src/assets/i18n/eng.json
+++ b/resident-ui/src/assets/i18n/eng.json
@@ -409,7 +409,7 @@
         "sameNameInputErrorMsg": "The $NAME you have entered already exists. Please enter a new $NAME to proceed.",
         "sameDobInputErrorMsg": "The DOB you have entered already exists. Please enter a new DOB to proceed.",
         "sameGenderInputErrorMsg": "The gender you have chosen already exists. Please choose a new gender to proceed.",
-        "EnterAllAddress":"Please select",
+        "EnterAllAddress":"Please ",
         "select":"Select",
         "remainingAttems":"$remainingAttems attempts left",
         "maxAttems":"$Name change request can be made maximum $MaxAttems times.",
@@ -417,10 +417,9 @@
         "dateOfBirth":"Date of birth",
         "gender":"Gender",
         "addressLine1":"Address",
-        "sameFileUploading":"Please upload file with a different file name."
-    },
-    "preview": {
-        "title": "Preview"
+        "sameFileUploading":"Please upload file with a different file name.",
+        "docTypePlaceholder":"Select Document Type",
+        "DocIDPlaceholder":"Enter Document ID"
     },
     "trackservicerequest": {
         "title": "Track My Requests",
@@ -614,7 +613,8 @@
         "updateMyData": {
             "emailSuccessMsg": "Your Email ID has been successfully updated against the Event ID: $eventId.",
             "phoneNumberSuccessMsg": "your phone number has been successfully updated against the event ID: $eventId.",
-            "newDataUpdatedSuccessMsg": "Your request to change your data has been submitted against the Event ID: $eventId."
+            "newDataUpdatedSuccessMsg": "Your request to change your $dataType data has been submitted against the Event ID: $eventId.",
+            "updateNotificationData":"Your request to change your notification language has been submitted against the Event ID: $eventId."
         }
     },
     "autologout": {
diff --git a/resident-ui/src/assets/i18n/fra.json b/resident-ui/src/assets/i18n/fra.json
index e2c97c46..07af2d0f 100644
--- a/resident-ui/src/assets/i18n/fra.json
+++ b/resident-ui/src/assets/i18n/fra.json
@@ -409,7 +409,7 @@
         "sameNameInputErrorMsg": "Le $NAME que vous avez saisi existe déjà. Veuillez saisir un nouveau $NAME pour continuer.",
         "sameDobInputErrorMsg": "La date de naissance que vous avez saisie existe déjà. Veuillez saisir une nouvelle date de naissance pour continuer.",
         "sameGenderInputErrorMsg": "Le genre que vous avez choisi existe déjà. Veuillez choisir un nouveau genre pour continuer.",
-        "EnterAllAddress": "Veuillez sélectionner",
+        "EnterAllAddress": "S'il te plaît ",
         "select": "Sélectionner",
         "remainingAttems":"Il vous reste $remainingAttems tentatives.",
         "maxAttems": "Vous pouvez faire une demande de changement de $Name un maximum de $MaxAttems fois.",
@@ -417,10 +417,9 @@
         "dateOfBirth": "Date de naissance",
         "gender": "Genre",
         "addressLine1":"Adresse",
-        "sameFileUploading":"Veuillez télécharger le fichier avec un nom de fichier différent."
-    },
-    "preview": {
-        "title": "Aperçu"
+        "sameFileUploading":"Veuillez télécharger le fichier avec un nom de fichier différent.",
+        "docTypePlaceholder": "Sélectionner le type de document",
+        "DocIDPlaceholder": "Entrer l'identifiant du document"
     },
     "trackservicerequest": {
         "title": "Suivre mes demandes",
@@ -614,7 +613,8 @@
         "updateMyData": {
             "emailSuccessMsg": "Votre adresse e-mail a été mise à jour avec succès pour l'ID d'événement : $eventId.",
             "phoneNumberSuccessMsg": "Votre numéro de téléphone a été mis à jour avec succès pour l'ID d'événement : $eventId.",
-            "newDataUpdatedSuccessMsg": "Votre demande de modification de vos données a été soumise avec succès pour l'ID d'événement : $eventId."
+            "newDataUpdatedSuccessMsg": "Votre demande de modification de vos données $dataType a été soumise pour l'ID de l'événement : $eventId.",
+            "updateNotificationData": "Votre demande de modification de la langue des notifications a été soumise pour l'ID de l'événement : $eventId."
         }
     },
     "autologout": {
diff --git a/resident-ui/src/assets/i18n/hin.json b/resident-ui/src/assets/i18n/hin.json
index 12474884..65da521c 100644
--- a/resident-ui/src/assets/i18n/hin.json
+++ b/resident-ui/src/assets/i18n/hin.json
@@ -390,7 +390,7 @@
         "identity": "पहचान",
         "address": "पता",
         "contact": "संपर्क",
-        "languagePreference": "भाषा प्राथमिकता",
+        "languagePreference": "पसंदीदा भाषा",
         "identityHeading": "मेरी पहचान",
         "addressHeading": "मेरा पता",
         "contactHeading": "मेरा संपर्क",
@@ -403,13 +403,13 @@
         "update": "अपडेट करें",
         "calendarPlaceHolder": "DD/MMM/YYYY",
         "documentUploaded": "दस्तावेज़ अपलोड किया गया",
-        "languageHeading": "मेरी भाषा प्राथमिकता",
+        "languageHeading": "मेरी पसंदीदा भाषा",
         "InvalidFormatMsg": "आप अपलोड करने की कोशिश कर रहे हैं वह फ़ाइल प्रकार समर्थित नहीं है। कृपया एक अलग फ़ाइल प्रकार अपलोड करें।",
         "InvalidFileSize": "आप अपलोड करने की कोशिश कर रहे हैं वह दस्तावेज़ 2mb की फ़ाइल साइज़ सीमा से अधिक है। कृपया 2mb से कम की फ़ाइल अपलोड करें।",
         "sameNameInputErrorMsg": "आपने पहले से ही $NAME दर्ज किया है। कृपया जारी करने के लिए एक नया $NAME दर्ज करें।",
         "sameDobInputErrorMsg": "आपने दर्ज की गई जन्मतिथि पहले से मौजूद है। कृपया आगे बढ़ने के लिए एक नई जन्मतिथि दर्ज करें।",
         "sameGenderInputErrorMsg": "आपने चुना हुआ लिंग पहले से मौजूद है। कृपया आगे बढ़ने के लिए एक नया लिंग चुनें।",
-        "EnterAllAddress": "कृपया चयन कीजिए",
+        "EnterAllAddress": "कृपया ",
         "select": "चुनना",
         "remainingAttems": "आपके पास $remainingAttems प्रयास शेष हैं।",
         "maxAttems": "$Name परिवर्तन अनुरोध को अधिकतम $MaxAttems बार किया जा सकता है।",
@@ -417,10 +417,9 @@
         "dateOfBirth": "जन्म तिथि",
         "gender": "लिंग",
         "addressLine1":"पता",
-        "sameFileUploading":"कृपया एक अलग फ़ाइल नाम के साथ फ़ाइल अपलोड करें।"
-    },
-    "preview": {
-        "title": "पूर्व दर्शन"
+        "sameFileUploading":"कृपया एक अलग फ़ाइल नाम के साथ फ़ाइल अपलोड करें।",
+        "docTypePlaceholder": "दस्तावेज़ प्रकार चुनें",
+        "DocIDPlaceholder": "दस्तावेज़ आईडी दर्ज करें"
     },
     "trackservicerequest": {
         "title": "मेरी अनुरोधों का पता लगाएं",
@@ -520,8 +519,8 @@
         "updateMessage": "सफलतापूर्वक अपडेट किया गया",
         "mappingMessage": "सफलतापूर्वक मैप किया गया",
         "termsAndConditionsLabel": "नियम और शर्तें",
-        "clickHere": "यहां क्लिक करें",
-        "clickHere2": "क्लिक करें",
+        "clickHere": "यहां करें",
+        "clickHere2": "क्लिक",
         "relogin": "फिर से लॉगिन करने के लिए।",
         "login": "लॉगिन करने के लिए।",
         "click":"यहां क्लिक करें।",
@@ -534,8 +533,8 @@
         "SuccessLogin": "आपने सफलतापूर्वक लॉगिन किया है।",
         "successLogout": "आपने सफलतापूर्वक लॉगआउट किया है। ",
         "dearResident": "प्रिय निवासी,",
-        "trackStatusText": "घटना की स्थिति को ट्रैक करने के लिए, क्लिक करें ",
-        "trackStatusForLogin": "इवेंट के बारे में विवरण देखने के लिए इस ईवेंट ID का उपयोग किया जा सकता है। क्लिक करें ",
+        "trackStatusText": "घटना की स्थिति को ट्रैक करने के लिए, क्लिक ",
+        "trackStatusForLogin": "इवेंट के बारे में विवरण देखने के लिए इस ईवेंट ID का उपयोग किया जा सकता है। क्लिक ",
         "clickYesToProceed": "आगे बढ़ने के लिए हाँ दबाएं।",
         "logoutconfirmMessage": "क्या आप लॉगआउट करना चाहते हैं।",
         "accessDenied": "आप इस सेवा तक पहुंच नहीं पा रहे हैं क्योंकि आपने लॉगिन करते समय सहमति स्वीकार नहीं की है। आपसे अनुरोध है कि आप फिर से लॉगिन करें और प्रासंगिक सहमति स्वीकार करें ताकि आप आगे बढ़ सकें।",
@@ -614,7 +613,8 @@
         "updateMyData": {
             "emailSuccessMsg": "आपका ईमेल ID सफलतापूर्वक अपडेट किया गया है। इवेंट ID: $eventId के खिलाफ।",
             "phoneNumberSuccessMsg": "आपका फोन नंबर सफलतापूर्वक अपडेट किया गया है। इवेंट ID: $eventId के खिलाफ।",
-            "newDataUpdatedSuccessMsg": "आपका डेटा बदलने का अनुरोध सफलतापूर्वक सबमिट किया गया है। इवेंट ID: $eventId के खिलाफ।"
+            "newDataUpdatedSuccessMsg": "आपकी अनुरोध $dataType डेटा बदलने के लिए इवेंट आईडी: $eventId के खिलाफ सबमिट किया गया है।",
+            "updateNotificationData": "आपका सूचना भाषा बदलने का अनुरोध इवेंट आईडी: $eventId के खिलाफ सबमिट किया गया है।"
         }
     },
     "autologout": {
diff --git a/resident-ui/src/assets/i18n/kan.json b/resident-ui/src/assets/i18n/kan.json
index aaf2bad6..b2ec6217 100644
--- a/resident-ui/src/assets/i18n/kan.json
+++ b/resident-ui/src/assets/i18n/kan.json
@@ -397,7 +397,7 @@
         "uploadImage": "ಚಿತ್ರವನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಿ",
         "dropImage": "ಚಿತ್ರವನ್ನು ಹಾಕಿಕೊಳ್ಳಿ",
         "or": "ಅಥವಾ",
-        "preview": "ಪೂರ್ವದರ್ಶನ",
+        "preview": "ಮುನ್ನೋಟ",
         "enteredValuesNotMatch": "ನಮೂದಿಸಿದ ಮೌಲ್ಯಗಳು ಹೊಂದಿಕೊಳ್ಳುವುದಿಲ್ಲ.",
         "submit": "ಸಲ್ಲಿಸಿ",
         "update": "ಅಪ್ಡೇಟ್ ಮಾಡಿ",
@@ -409,7 +409,7 @@
         "sameNameInputErrorMsg": "$NAME ನೀವು ಈಗ ನಮೂದಿಸಿದ್ದೀರಿ ಮತ್ತು ಇದು ಈಗಿನ $NAME ಮಾತ್ರ ಇದೆ. ಮುಂದುವರೆಯಲು ಹೊಸ $NAME ನಮೂದಿಸಿ.",
         "sameDobInputErrorMsg": "ನೀವು ನಮೂದಿಸಿದ ಜನ್ಮ ದಿನಾಂಕ ಈಗಾಗಲೇ ಇದೆ. ಮುಂದುವರೆಸಲು ಹೊಸ ಜನ್ಮ ದಿನಾಂಕವನ್ನು ನಮೂದಿಸಿ.",
         "sameGenderInputErrorMsg": "ನೀವು ಆಯ್ಕೆ ಮಾಡಿದ ಲಿಂಗ ಈಗಾಗಲೇ ಇದೆ. ಮುಂದುವರೆಸಲು ಹೊಸ ಲಿಂಗವನ್ನು ಆಯ್ಕೆ ಮಾಡಿ.",
-        "EnterAllAddress": "ದಯವಿಟ್ಟು ಆಯ್ಕೆ ಮಾಡು",
+        "EnterAllAddress": "ದಯವಿಟ್ಟು ",
         "select": "ಆಯ್ಕೆ ಮಾಡಿ",
         "remainingAttems": "$remainingAttems ಪ್ರಯಾಸಗಳು ಉಳಿಯಿವೆ.",
         "maxAttems": "$Name ಬದಲಾಯಿಸಲು ಅಧಿಕತಮ $MaxAttems ಸಲ ಅನುವಾದಿಸಬಹುದು.",
@@ -417,10 +417,9 @@
         "dateOfBirth": "ಹುಟ್ಟಿದ ದಿನಾಂಕ",
         "gender": "ಲಿಂಗ",
         "addressLine1":"ವಿಳಾಸ",
-        "sameFileUploading":"ದಯವಿಟ್ಟು ವೇರೆ ಕಡತವನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಿ."
-    },
-    "preview": {
-        "title": "ಮುನ್ನೋಟ"
+        "sameFileUploading":"ದಯವಿಟ್ಟು ವೇರೆ ಕಡತವನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಿ.",
+        "docTypePlaceholder": "ದಸ್ತಾವೇಜು ಪ್ರಕಾರವನ್ನು ಆಯ್ಕೆಮಾಡಿ",
+        "DocIDPlaceholder": "ದಸ್ತಾವೇಜು ಐಡಿ ನಮೂದಿಸಿ"
     },
     "trackservicerequest": {
         "title": "ನನ್ನ ವಿನಂತಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಿ",
@@ -614,7 +613,8 @@
         "updateMyData": {
             "emailSuccessMsg": "ನಿಮ್ಮ ಇಮೇಲ್ ID ಯಶಸ್ವಿಯಾಗಿ ನವೀಕರಿತವಾಗಿದೆ. ಈವೆಂಟ್ ID: $eventId ಗೆ.",
             "phoneNumberSuccessMsg": "ನಿಮ್ಮ ಫೋನ್ ಸಂಖ್ಯೆ ಯಶಸ್ವಿಯಾಗಿ ನವೀಕರಿತವಾಗಿದೆ. ಈವೆಂಟ್ ID: $eventId ಗೆ.",
-            "newDataUpdatedSuccessMsg": "ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಬದಲಿಸಲು ನಿಮ್ಮ ವಿನಂತಿ ಸಲ್ಲಿಸಲಾಗಿದೆ. ಈವೆಂಟ್ ID: $eventId ಗೆ."
+            "newDataUpdatedSuccessMsg": "ನೀವು ನಿಮ್ಮ $dataType ಡೇಟಾವನ್ನು ಬದಲಿಸಲು ವಿನಂತಿಸಿದ್ದೀರಿ. ಈ ಈವೆಂಟ್ ಐಡಿ: $eventId ಖಿಲಾನಗೆ ಸಲ್ಲಿಸಲಾಗಿದೆ.",
+            "updateNotificationData": "ನಿಮ್ಮ ಅಧಿಸೂಚನೆ ಭಾಷೆಯನ್ನು ಬದಲಿಸಲು ವಿನಂತಿಸಿದ್ದೀರಿ. ಈ ಈವೆಂಟ್ ಐಡಿ: $eventId ಖಿಲಾನಗೆ ಸಲ್ಲಿಸಲಾಗಿದೆ."
         }
     },
     "autologout": {
diff --git a/resident-ui/src/assets/i18n/spa.json b/resident-ui/src/assets/i18n/spa.json
index ebc24450..b9fb3d4b 100644
--- a/resident-ui/src/assets/i18n/spa.json
+++ b/resident-ui/src/assets/i18n/spa.json
@@ -409,7 +409,7 @@
         "sameNameInputErrorMsg": "El $NAME que has ingresado ya existe. Por favor, ingresa un nuevo $NAME para continuar.",
         "sameDobInputErrorMsg": "La fecha de nacimiento que has ingresado ya existe. Por favor, ingresa una fecha de nacimiento nueva para continuar.",
         "sameGenderInputErrorMsg": "El género que has elegido ya existe. Por favor, elige un género nuevo para continuar.",
-        "EnterAllAddress": "Por favor selecciona",
+        "EnterAllAddress": "Por favor ",
         "select": "Seleccionar",
         "remainingAttems": "Quedan $remainingAttems intentos.",
         "maxAttems": "Se puede solicitar un cambio de $Name un máximo de $MaxAttems veces.",
@@ -417,10 +417,9 @@
         "dateOfBirth": "Fecha de nacimiento",
         "gender": "Género",
         "addressLine1":"Dirección",
-        "sameFileUploading":"Por favor, suba el archivo con un nombre de archivo diferente."
-    },
-    "preview": {
-        "title": "Avance"
+        "sameFileUploading":"Por favor, suba el archivo con un nombre de archivo diferente.",
+        "docTypePlaceholder": "Seleccionar tipo de documento",
+        "DocIDPlaceholder": "Ingresar número de documento"
     },
     "trackservicerequest": {
         "title": "Seguir mis solicitudes",
@@ -614,7 +613,8 @@
         "updateMyData": {
             "emailSuccessMsg": "Tu ID de correo electrónico se ha actualizado correctamente para el ID de evento: $eventId.",
             "phoneNumberSuccessMsg": "Tu número de teléfono se ha actualizado correctamente para el ID de evento: $eventId.",
-            "newDataUpdatedSuccessMsg": "Tu solicitud de cambiar tus datos se ha enviado correctamente para el ID de evento: $eventId."
+            "newDataUpdatedSuccessMsg": "Se ha enviado su solicitud para cambiar sus datos de $dataType con éxito. Se ha registrado con el ID del evento: $eventId.",
+            "updateNotificationData": "Se ha enviado su solicitud para cambiar su idioma de notificación con éxito. Se ha registrado con el ID del evento: $eventId."
         }
     },
     "autologout": {
diff --git a/resident-ui/src/assets/i18n/tam.json b/resident-ui/src/assets/i18n/tam.json
index cd6cc52a..35b5ebdf 100644
--- a/resident-ui/src/assets/i18n/tam.json
+++ b/resident-ui/src/assets/i18n/tam.json
@@ -409,7 +409,7 @@
         "sameNameInputErrorMsg": "நீங்கள் உள்ளிட்டிருந்தும் போது அந்த $NAME ஏற்கனவே உள்ளது. தயவுசெய்து துணையாகத் துணை ஒரு $NAME உள்ளிடவும்.",
         "sameDobInputErrorMsg": "நீங்கள் உள்ளிட்ட பிறந்த தேதி ஏற்கனவே உள்ளது. தயவுசெய்து முதலில் ஒரு புதிய பிறந்த தேதியை உள்ளிடவும்.",
         "sameGenderInputErrorMsg": "நீங்கள் தேர்ந்தெடுத்த பாலினத்தை ஏற்கனவே உள்ளது. தயவுசெய்து முதலில் ஒரு புதிய பாலினத்தை தேர்ந்தெடுக்கவும்.",
-        "EnterAllAddress":"தயவு செய்து தேர்வு செய்யவும்",
+        "EnterAllAddress":"தயவு செய்து",
         "select":"தேர்ந்தெடு",
         "remainingAttems": "இன்னும் $remainingAttems முயற்சிகள் உள்ளன.",
         "maxAttems": "$Name மாற்றம் கேட்க அதிசய $MaxAttems முறை செய்யப்படலாம்.",
@@ -417,10 +417,9 @@
         "dateOfBirth": "பிறந்த தேதி",
         "gender": "பாலினம்",
         "addressLine1":"முகவரி",
-        "sameFileUploading":"வேறு கோப்பு பெயர் பயன்படுத்துகின்றது. வேறு கோப்பை பதிவேற்றவும்."
-    },
-    "preview": {
-        "title": "முன்னோட்ட"
+        "sameFileUploading":"வேறு கோப்பு பெயர் பயன்படுத்துகின்றது. வேறு கோப்பை பதிவேற்றவும்.",
+        "docTypePlaceholder": "ஆவண வகையை தேர்ந்தெடு",
+        "DocIDPlaceholder": "ஆவண ஐடி உள்ளிடு"
     },
     "trackservicerequest": {
         "title": "எனது கோரிக்கைகளை கண்காணிக்கவும்",
@@ -527,14 +526,14 @@
         "click":"இங்கே கிளிக் செய்யவும்.",
         "toSeeMoreDetails":"மேலும் விவரங்கள் பார்க்க",
         "otpPopupDescription": "ஒரு முறையே கடவுச்சொல் (OTP) அனுப்பப்பட்டுள்ளது",
-        "loginSuccessfully": "பிரிவாசியானவரே, நீங்கள் வெற்றிகரமாக உள்நுழைந்துள்ளீர்கள்",
+        "loginSuccessfully": "அன்புள்ள குடியிருப்பாளரே, நீங்கள் வெற்றிகரமாக உள்நுழைந்துள்ளீர்கள்",
         "successRemainMsg": "முன்னர் நிரல் மூலமாக சேவை வேட்டையைக் கண்காணிக்க கொள்ளலாம்.",
         "passwordCombinationHeading": "கடவுச்சொல் கலாச்சாரம்: ",
         "passwordCombination": "உங்கள் முதல் பெயரில் உள்ள முதல் நான்கு எழுத்துக்களை உயர்த்துங்கள் மற்றும் உங்கள் பிறந்த ஆண்டினை உள்ளிட்டுக் கொள்ளுங்கள். உதாரணம்: உங்கள் பெயர் Johnny Depp ஆகின்றது மற்றும் உங்கள் பிறந்த தேதி 09/06/1963 ஆகின்றது. உங்கள் கடவுச்சொல் JOHN1963 ஆகும்.",
         "SuccessLogin": "நீங்கள் வெற்றிகரமாக உள்நுழைந்துள்ளீர்கள்.",
         "successLogout": "நீங்கள் வெற்றிகரமாக வெளியேற்றப்பட்டுள்ளீர்கள். ",
-        "dearResident": "பிரிவாசியானவரே,",
-        "trackStatusText": "நிகழ்வின் நிலையைக் கண்காணிக்க மேலும் கிளிக் செய்க ",
+        "dearResident": "அன்புள்ள குடியிருப்பாளரே,",
+        "trackStatusText": "நிகழ்வின் நிலையைக் கண்காணிக்க, செய்க ",
         "trackStatusForLogin": "இந்த நிகழ்வு ID நிகழ்வு பற்றிய விவரங்களைப் பார்க்க மேலே கொடுக்கப்பட்ட EID ஐப் பயன்படுத்தலாம். மேலே கிளிக் செய்யவும் ",
         "clickYesToProceed": "மேலே கிளிக் செய்ய ஆமாதியைக் கிளிக் செய்க.",
         "logoutconfirmMessage": "நீங்கள் வெளியேறுவதன் மூலம் உறுதியை நிராகரிக்க விரும்புகின்றீர்களா?",
@@ -560,7 +559,7 @@
         "agreeLabelForUpdateData": "தரவு புதுப்பிக்க விதிமுறைகளை ஏற்கின்றேன்",
         "personalisedcardConditions": {
             "title": "உங்கள் வாழ்க்கையின் படிமத்தைப் பதிவிறக்குக",
-            "wishes": "பிரிவாசியானவரே,",
+            "wishes": "அன்புள்ள குடியிருப்பாளரே,",
             "description": "அட்டையை பதிவிறக்க எங்களுக்கு சில நேரங்கள் போகும். தேர்ந்தெடுக்கப்பட்ட அட்டையைப் பதிவிறக்க நீங்கள் ஒரு இணைப்பைப் பயன்படுத்தி பெறலாம். அது தயாராகின்ற போது, அறிவிப்பு பிரிவின் பிரிவு பகுதியிலிருந்து அட்டையையேடுக்க முடியும்.",
             "sendVid": "VID ஐ அனுப்புக",
             "agreeLabel1": "பதிவு செய்யப்பட்ட தொலைபேசியில் VID ஐ அனுப்புக",
@@ -614,7 +613,8 @@
         "updateMyData": {
             "emailSuccessMsg": "உங்கள் மின்னஞ்சல் ID வெற்றிகரமாக புதுப்பிக்கப்பட்டுள்ளது நிகழ்வு ID: $eventId எதிர்ப்புக்கு.",
             "phoneNumberSuccessMsg": "உங்கள் தொலைபேசி எண் வெற்றிகரமாக புதுப்பிக்கப்பட்டுள்ளது நிகழ்வு ID: $eventId எதிர்ப்புக்கு.",
-            "newDataUpdatedSuccessMsg": "உங்கள் தரவை மாற்ற கோரிக்கையாகவும் மேலும் தரவை பதிவுசெய்ய கோரிக்கை சமர்ப்பிக்க வேண்டும் நிகழ்வு ID: $eventId எதிர்ப்புக்கு."
+            "newDataUpdatedSuccessMsg": "உங்கள் $dataType தரவுக்களை மாற்ற கோரியும், இந்த நிகழ்சிக்கு எதிர்காலத்தில் மதிப்பிடப்பட்டுள்ளது: $eventId.",
+            "updateNotificationData": "உங்கள் அறிவிப்பு மொழியை மாற்ற கோரியும், இந்த நிகழ்சிக்கு எதிர்காலத்தில் மதிப்பிடப்பட்டுள்ளது: $eventId."
         }
     },
     "autologout": {