[USH-1699] Identify unlocalized strings in the web client and add the…

…m to en.json (#1494)

* Translations - Breadcrumbs

* Translations - Login/Authentication

* Translations: Post timelines, posts loading message, date shows up here text

* Reverting timeline translations for now

* Translation: OK Button, Uploading, Activty View

* Translation: Data source subheading

* Slight adjustment to solve 'Add webhook' json file conflicts

* Translations: Survey & General Confirm Modal, snackbar, Survey Colorpicker, default settings header

* Translations: Activity page

* Translations: Adding more strings into en.json for map view options

* Translations: Onboarding modals

* Translations: Sources Filters

* Translations: Timelines for post metadata and post conversations

* Just a slight fix

* Translations: showError() in survey-item, user-settings components and polling service

* Translations: Close button in all snackbars

* Translations: Location Select strings

* Translations: Image uploader special characters text

* Translations: Post edit component

* Translations: Post not authorized to edit

* Translations: Remaining strings

* Renamed 'displayNane' to 'displayName'

apps/web-mzima-client/src/app/activity/activity-timeline/activity-timeline.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PostsService } from '@mzima-client/sdk';
+import { TranslateService } from '@ngx-translate/core';
 import { LegendPosition, ScaleType } from '@swimlane/ngx-charts';
 import { Color } from '@swimlane/ngx-charts/lib/utils/color-sets';
 import { ManipulateType } from 'dayjs';
@@ -33,18 +34,23 @@ export class ActivityTimelineComponent implements OnInit {
   };
   public cumulativeTotal = true;
   public dateRange: ManipulateType;
-  public filters = [
-    { displayNane: 'Show all posts', value: '' },
-    { displayNane: 'Categories', value: 'tags' },
-    { displayNane: 'Survey', value: 'form' },
-    { displayNane: 'Status', value: 'status' },
-  ];
+  public filters: { displayName: string; value: string }[] = [];
 
-  constructor(private postsService: PostsService) {}
+  constructor(private postsService: PostsService, private translate: TranslateService) {
+    this.initializeFilters();
+  }
 
   ngOnInit() {
     this.getPostStatistics(this.selectedFilter);
   }
+  private initializeFilters() {
+    this.filters = [
+      { displayName: this.translate.instant('activity.show_all_posts'), value: '' },
+      { displayName: this.translate.instant('activity.categories'), value: 'tags' },
+      { displayName: this.translate.instant('activity.survey'), value: 'form' },
+      { displayName: this.translate.instant('activity.status'), value: 'status' },
+    ];
+  }
 
   public getPostStatistics(value: string) {
     const params = {

apps/web-mzima-client/src/app/activity/bar-chart/bar-chart.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { PostsService } from '@mzima-client/sdk';
+import { TranslateService } from '@ngx-translate/core';
 import { ScaleType } from '@swimlane/ngx-charts';
 import { Color } from '@swimlane/ngx-charts/lib/utils/color-sets';
 import { ManipulateType } from 'dayjs';
@@ -19,18 +20,24 @@ export class BarChartComponent implements OnInit {
     domain: ['#FFEBBB'],
   };
   public dateRange: ManipulateType;
-  public filters = [
-    { displayNane: 'Categories', value: 'tags' },
-    { displayNane: 'Survey', value: 'form' },
-    { displayNane: 'Status', value: 'status' },
-  ];
+  public filters: { displayName: string; value: string }[] = [];
 
-  constructor(private postsService: PostsService) {}
+  constructor(private postsService: PostsService, private translate: TranslateService) {
+    this.initializeFilters();
+  }
 
   public ngOnInit() {
     this.getPostStatistics(this.selectedFilter);
   }
 
+  private initializeFilters() {
+    this.filters = [
+      { displayName: this.translate.instant('activity.categories'), value: 'tags' },
+      { displayName: this.translate.instant('activity.survey'), value: 'form' },
+      { displayName: this.translate.instant('activity.status'), value: 'status' },
+    ];
+  }
+
   public getPostStatistics(value: any) {
     this.data = [];
     this.postsService.getPostStatistics({ group_by: value }).subscribe({

apps/web-mzima-client/src/app/activity/chart-head/chart-head.component.html

@@ -6,12 +6,12 @@ <h1>{{ title }}</h1>
         <mat-select
           name="filter"
           disableOptionCentering
-          placeholder="Select range"
+          placeholder="{{ 'activity.select_range' | translate }}"
           [(ngModel)]="selectedRange"
           (selectionChange)="rangeChange($event)"
         >
           <mat-option [value]="filter.value" *ngFor="let filter of ranges">
-            {{ filter.displayNane }}
+            {{ filter.displayName }}
           </mat-option>
         </mat-select>
       </mat-form-field>
@@ -22,12 +22,12 @@ <h1>{{ title }}</h1>
         <mat-select
           name="filter"
           disableOptionCentering
-          placeholder="Select filter"
+          placeholder="{{ 'activity.select_filter' | translate }}"
           [(ngModel)]="selectedFilter"
           (selectionChange)="change($event)"
         >
           <mat-option [value]="filter.value" *ngFor="let filter of filters">
-            {{ filter.displayNane }}
+            {{ filter.displayName }}
           </mat-option>
         </mat-select>
       </mat-form-field>

apps/web-mzima-client/src/app/activity/chart-head/chart-head.component.ts

@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatSelectChange } from '@angular/material/select';
 import { ManipulateType } from 'dayjs';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-chart-head',
@@ -14,13 +15,20 @@ export class ChartHeadComponent {
   @Input() public selectedRange: ManipulateType;
   @Output() public filterChanged = new EventEmitter();
   @Output() public dateChanged = new EventEmitter();
+  public ranges: { displayName: string; value: string | null }[] = [];
 
-  public ranges = [
-    { displayNane: 'All time', value: null },
-    { displayNane: 'Last week', value: 'w' },
-    { displayNane: 'Last month', value: 'm' },
-    { displayNane: 'Last year', value: 'y' },
-  ];
+  constructor(private translate: TranslateService) {
+    this.initializeRanges();
+  }
+
+  private initializeRanges() {
+    this.ranges = [
+      { displayName: this.translate.instant('activity.all_time'), value: null },
+      { displayName: this.translate.instant('activity.last_week'), value: 'w' },
+      { displayName: this.translate.instant('activity.last_month'), value: 'm' },
+      { displayName: this.translate.instant('activity.last_year'), value: 'y' },
+    ];
+  }
 
   public rangeChange(event: MatSelectChange): void {
     this.dateChanged.emit(event.value);

apps/web-mzima-client/src/app/auth/auth-routing.module.ts

@@ -3,7 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { ResetComponent } from '@auth';
 
 const routes: Routes = [
-  { path: '', component: ResetComponent, data: { breadcrumb: 'Password recovery' } },
+  { path: '', component: ResetComponent, data: { breadcrumb: 'nav.password_recovery' } },
 ];
 
 @NgModule({

apps/web-mzima-client/src/app/auth/reset/reset.component.html

@@ -1,7 +1,7 @@
 <div class="form-page">
   <div class="restore-password-form">
     <ng-container *ngIf="!isPasswordRestored; else success">
-      <h1>Enter your new password</h1>
+      <h1>{{ 'user.enter_new_password' | translate }}</h1>
       <app-restore-password-form (passwordRestored)="passwordRestored()">
       </app-restore-password-form>
     </ng-container>
@@ -12,8 +12,8 @@ <h1>Enter your new password</h1>
   <div class="success-msg">
     <app-lottie-animation class="visual" [path]="'/assets/lottie/success-animation.json'">
     </app-lottie-animation>
-    <strong mat-dialog-title>Your password was successfully changed</strong>
-    <p>Now you can login with new credentials</p>
+    <strong mat-dialog-title>{{ 'user.password_change_success' | translate }}</strong>
+    <p>{{ 'user.password_change_success_info' | translate }}</p>
     <mzima-client-button type="button" (buttonClick)="openLoginModal()" [expand]="false">
       {{ 'nav.login' | translate }}
     </mzima-client-button>

apps/web-mzima-client/src/app/core/handlers/errors-handler.service.ts

@@ -5,7 +5,7 @@ import { TranslateService } from '@ngx-translate/core';
 
 @Injectable()
 export class ErrorsHandlerService implements ErrorHandler {
-  constructor(private injector: Injector) {}
+  constructor(private injector: Injector, private translate: TranslateService) {}
 
   handleError(error: Error | HttpErrorResponse) {
     const translate = this.injector.get(TranslateService);
@@ -29,6 +29,9 @@ export class ErrorsHandlerService implements ErrorHandler {
 
   private showError(message: string) {
     const snackBar = this.injector.get(MatSnackBar);
-    snackBar.open(message, 'Close', { panelClass: ['error'], duration: 3000 });
+    snackBar.open(message, this.translate.instant('notify.snackbar.close'), {
+      panelClass: ['error'],
+      duration: 3000,
+    });
   }
 }

apps/web-mzima-client/src/app/core/helpers/search-form.ts

@@ -22,43 +22,43 @@ export const loggedOutStatuses = [statuses[0]];
 
 export const sources = [
   {
-    name: 'Web',
+    name: 'global_filter.sources.web',
     value: 'web',
     total: 0,
     checked: true,
   },
   {
-    name: 'Mobile',
+    name: 'global_filter.sources.mobile',
     value: 'mobile',
     total: 0,
     checked: true,
   },
   {
-    name: 'Email',
+    name: 'global_filter.sources.email',
     value: 'email',
     total: 0,
     checked: true,
   },
   {
-    name: 'SMS',
+    name: 'global_filter.sources.sms',
     value: 'sms',
     total: 0,
     checked: true,
   },
   {
-    name: 'Twitter',
+    name: 'global_filter.sources.twitter',
     value: 'twitter',
     total: 0,
     checked: true,
   },
   {
-    name: 'USSD',
+    name: 'global_filter.sources.ussd',
     value: 'ussd',
     total: 0,
     checked: true,
   },
   {
-    name: 'WhatsApp',
+    name: 'global_filter.sources.whatsapp',
     value: 'whatsapp',
     total: 0,
     checked: true,

apps/web-mzima-client/src/app/core/pipes/date-ago.pipe.ts

@@ -1,25 +1,37 @@
 import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
 @Pipe({
   name: 'dateAgo',
 })
 export class DateAgoPipe implements PipeTransform {
+  constructor(private translate: TranslateService) {}
   transform(value: any): unknown {
     if (!value) {
-      return 'a long time ago';
+      return this.translate.instant('date.aLongTimeAgo');
     }
     let time = (Date.now() - Date.parse(value)) / 1000;
     if (time < 10) {
-      return 'just now';
+      return this.translate.instant('date.justNow');
     } else if (time < 60) {
-      return 'a moment ago';
+      return this.translate.instant('date.aMomentAgo');
     }
-    const divider = [60, 60, 24, 30, 12];
-    const string = [' second', ' minute', ' hour', ' day', ' month', ' year'];
-    let i;
-    for (i = 0; Math.floor(time / divider[i]) > 0; i++) {
-      time /= divider[i];
+
+    const dividers = [60, 60, 24, 30, 12];
+    const string = ['second', 'minute', 'hour', 'day', 'month', 'year'];
+    let i = 0;
+
+    // Calculate the appropriate unit
+    while (i < dividers.length && Math.floor(time / dividers[i]) > 0) {
+      time /= dividers[i];
+      i++;
     }
-    const plural = Math.floor(time) > 1 ? 's' : '';
-    return Math.floor(time) + string[i] + plural + ' ago';
+
+    const roundedTime = Math.floor(time);
+    const unit = string[i];
+    const pluralization = roundedTime > 1 ? 'plural' : 'singular';
+
+    // Translate the string based on singular/plural
+    return this.translate.instant(`date.${unit}.${pluralization}`, { time: roundedTime });
   }
 }

apps/web-mzima-client/src/app/core/services/notification.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
 import { SnackbarComponent, SnackbarData } from '../../shared/components';
+import { TranslateService } from '@ngx-translate/core';
 
 export interface SnackbarOptions extends MatSnackBarConfig {
   wide?: boolean;
@@ -10,10 +11,13 @@ export interface SnackbarOptions extends MatSnackBarConfig {
   providedIn: 'root',
 })
 export class NotificationService {
-  constructor(public snackBar: MatSnackBar) {}
+  constructor(public snackBar: MatSnackBar, private translate: TranslateService) {}
 
   showError(message: string) {
-    this.snackBar.open(message, 'Close', { panelClass: ['error'], duration: 3000 });
+    this.snackBar.open(message, this.translate.instant('notify.snackbar.close'), {
+      panelClass: ['error'],
+      duration: 3000,
+    });
   }
 
   showSnackbar(data?: SnackbarData, options?: SnackbarOptions) {

apps/web-mzima-client/src/app/core/services/polling.service.ts

@@ -135,7 +135,7 @@ export class PollingService implements OnDestroy {
         );
         break;
       default:
-        this.notificationService.showError('Failed to export');
+        this.notificationService.showError('data_export.data_export_err');
         break;
     }
   }

apps/web-mzima-client/src/app/feed/feed.component.html

@@ -17,9 +17,9 @@
         [ngClass]="{ 'feed-page__results-info__dim': !posts.length }"
         [attr.data-qa]="'feed-page-results'"
       >
-        <ng-container *ngIf="!posts.length && isLoading"
-          >Loading posts in {{ mode }} mode...</ng-container
-        >
+        <ng-container *ngIf="!posts.length && isLoading">{{
+          'post.loading_posts' | translate : { mode: mode }
+        }}</ng-container>
         <ng-container *ngIf="posts.length || (!posts.length && !isLoading)">
           {{ 'app.current_results' | translate }}
           {{ postCurrentLength }}

apps/web-mzima-client/src/app/feed/feed.component.ts

@@ -1154,7 +1154,7 @@ export class FeedComponent extends MainViewComponent implements OnInit, OnDestro
   }
 
   private showMessage(message: string, type: string, duration = 3000) {
-    this.snackBar.open(message, 'Close', {
+    this.snackBar.open(message, this.translate.instant('notify.snackbar.close'), {
       panelClass: [type],
       duration,
     });

apps/web-mzima-client/src/app/post/image-uploader/image-uploader.component.html

@@ -59,7 +59,7 @@
     </mat-form-field>
     <mat-error>
       <p *ngIf="captionControl?.hasError('specialCharacters')">
-        This field contains special characters
+        {{ 'post.media.special_char' | translate }}
       </p>
     </mat-error>
   </div>

apps/web-mzima-client/src/app/post/location-select/location-select.component.html

@@ -19,7 +19,10 @@
 </span>
 <div *ngIf="location">
   <div class="form-row">
-    <mat-label>Lat <span class="color-accent" *ngIf="required">*</span></mat-label>
+    <mat-label
+      >{{ 'post.location.lat' | translate }}
+      <span class="color-accent" *ngIf="required">*</span></mat-label
+    >
     <mat-form-field
       appearance="outline"
       [ngClass]="{ 'location-error': emptyFieldLat || noSpecialCharactersLat }"
@@ -47,12 +50,15 @@
       {{ 'post.location.errors.empty_lat' | translate }}
     </p>
     <p *ngIf="noSpecialCharactersLat" class="location-error">
-      Field latitude contains special characters
+      {{ 'post.location.errors.special_lat' | translate }}
     </p>
   </div>
 
   <div class="form-row">
-    <mat-label>Lng <span class="color-accent" *ngIf="required">*</span></mat-label>
+    <mat-label
+      >{{ 'post.location.lng' | translate
+      }}<span class="color-accent" *ngIf="required">*</span></mat-label
+    >
     <mat-form-field
       appearance="outline"
       [ngClass]="{ 'location-error': emptyFieldLng || noSpecialCharactersLng }"
@@ -80,7 +86,7 @@
       {{ 'post.location.errors.empty_lng' | translate }}
     </p>
     <p *ngIf="noSpecialCharactersLng" class="location-error">
-      Field longitude contains special characters
+      {{ 'post.location.errors.special_lng' | translate }}
     </p>
   </div>
 </div>