From 1b4e553a35ef19fe88882dbb58cf0e2c81892739 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 13 Nov 2024 09:50:57 +0100
Subject: [PATCH 01/28] Adding translations-button to post-head

---
 .../src/app/core/enums/icons.ts               |  1 +
 .../post/post-head/post-head.component.html   | 16 +++++++++++++
 .../src/app/post/post.module.ts               |  2 ++
 .../src/assets/icons/translate.svg            | 23 +++++++++++++++++++
 libs/sdk/src/lib/models/posts.interface.ts    |  7 ++++++
 5 files changed, 49 insertions(+)
 create mode 100644 apps/web-mzima-client/src/assets/icons/translate.svg

diff --git a/apps/web-mzima-client/src/app/core/enums/icons.ts b/apps/web-mzima-client/src/app/core/enums/icons.ts
index 28bc3415fe..4c59be5e77 100644
--- a/apps/web-mzima-client/src/app/core/enums/icons.ts
+++ b/apps/web-mzima-client/src/app/core/enums/icons.ts
@@ -75,4 +75,5 @@ export enum Icons {
   thumbUp = 'thumb-up',
   ellipses = 'ellipses',
   lock = 'lock',
+  translate = 'translate',
 }
diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
index e93e68cc3d..daeada1c9a 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
@@ -33,6 +33,22 @@
   >
     <mat-icon icon svgIcon="share" [data-qa]="'share-post'" [attr.post]="post.id"></mat-icon>
   </mzima-client-button>
+  <mzima-client-button
+    fill="clear"
+    color="gray"
+    tabindex="-1"
+    [iconOnly]="true"
+    (buttonClick)="translatePost()"
+    *ngIf="editable || post.enabled_languages.available.length > 1"
+    class="post-head__control post-head__control--share"
+  >
+    <mat-icon
+      icon
+      svgIcon="translate"
+      [data-qa]="'translate-post'"
+      [attr.post]="post.id"
+    ></mat-icon>
+  </mzima-client-button>
   <mzima-client-button
     *ngIf="!!user?.userId"
     fill="clear"
diff --git a/apps/web-mzima-client/src/app/post/post.module.ts b/apps/web-mzima-client/src/app/post/post.module.ts
index 48b253fc49..0079d4eb6b 100644
--- a/apps/web-mzima-client/src/app/post/post.module.ts
+++ b/apps/web-mzima-client/src/app/post/post.module.ts
@@ -39,6 +39,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { PostNotFoundComponent } from './post-not-found/post-not-found.component';
 import { PostNotAllowedComponent } from './post-not-allowed/post-not-allowed.component';
 import { PostConversationComponent } from './post-conversation/post-conversation.component';
+import { PostTranslateComponent } from './post-translate/post-translate.component';
 
 @NgModule({
   declarations: [
@@ -54,6 +55,7 @@ import { PostConversationComponent } from './post-conversation/post-conversation
     PostNotFoundComponent,
     PostNotAllowedComponent,
     PostConversationComponent,
+    PostTranslateComponent,
   ],
   imports: [
     CommonModule,
diff --git a/apps/web-mzima-client/src/assets/icons/translate.svg b/apps/web-mzima-client/src/assets/icons/translate.svg
new file mode 100644
index 0000000000..f087508b88
--- /dev/null
+++ b/apps/web-mzima-client/src/assets/icons/translate.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 32 32">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: none;
+      }
+
+      .st1 {
+        clip-path: url(#clippath);
+      }
+    </style>
+    <clipPath id="clippath">
+      <rect class="st0" x="4.8" y="3.2" width="32" height="32"/>
+    </clipPath>
+  </defs>
+  <g class="st1">
+    <g id="translate">
+      <path id="Vector" d="M17.4,20c.1-.4,0-.8-.2-1.1l-2.1-2.1h0c1.7-2,3-4.2,3.7-6.6h1.9c.5,0,1-.4,1-1h0c0-.6-.5-1-1-1h-6v-1c0-.5-.4-1-1-1s-1,.5-1,1v1h-6c-.5,0-1,.4-1,1s.5,1,1,1h10.2c-.7,1.9-1.7,3.8-3.2,5.4-.8-.9-1.5-1.9-2.1-2.9-.2-.3-.5-.5-.8-.5-.7,0-1.1.8-.8,1.4.6,1.1,1.4,2.2,2.3,3.2l-4.4,4.3c-.4.4-.4,1,0,1.4.4.4,1,.4,1.4,0l4.3-4.3,2,2c.5.5,1.4.3,1.6-.4ZM22.3,14.3c-.6,0-1.1.4-1.4.9l-3.7,9.8c-.2.6.2,1.3.9,1.3s.7-.2.9-.6l.9-2.4h4.8l.9,2.4c.1.4.5.6.9.6.6,0,1.1-.6.9-1.3l-3.7-9.8c-.2-.6-.8-.9-1.4-.9ZM20.7,21.3l1.6-4.3,1.6,4.3h-3.2Z"/>
+    </g>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/libs/sdk/src/lib/models/posts.interface.ts b/libs/sdk/src/lib/models/posts.interface.ts
index 6a808ea2f6..4b01240715 100644
--- a/libs/sdk/src/lib/models/posts.interface.ts
+++ b/libs/sdk/src/lib/models/posts.interface.ts
@@ -61,6 +61,7 @@ export interface PostPropertiesInterface {
   locks?: any[];
   data_source_message_id?: string;
   allowed_privileges: string[];
+  enabled_languages: PostEnabledLanguages;
 }
 
 export interface PostPropertiesUser {
@@ -112,6 +113,7 @@ export interface PostResult {
   form_id?: number;
   user?: PostPropertiesUser;
   post_content?: PostContent[];
+  enabled_languages: PostEnabledLanguages;
 }
 
 interface PostTag {
@@ -177,3 +179,8 @@ export interface PostContentField {
   type: string;
   value?: any;
 }
+
+export interface PostEnabledLanguages {
+  default: string;
+  available: string[];
+}

From 08e07da1a44504d3521c7d6adfd2a0ea0e23f4c9 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 13 Nov 2024 09:54:41 +0100
Subject: [PATCH 02/28] Adding post-translations component

---
 .../app/post/post-head/post-head.component.ts | 19 +++++++++++++++++
 .../post-translate.component.html             |  0
 .../post-translate.component.scss             |  0
 .../post-translate.component.spec.ts          | 21 +++++++++++++++++++
 .../post-translate.component.ts               |  0
 5 files changed, 40 insertions(+)
 create mode 100644 apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
 create mode 100644 apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
 create mode 100644 apps/web-mzima-client/src/app/post/post-translate/post-translate.component.spec.ts
 create mode 100644 apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts

diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
index 8ae42f8f93..1c2ff3da84 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
@@ -2,6 +2,7 @@ import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { CollectionsComponent } from '../../shared/components';
+import { PostTranslateComponent } from '../post-translate/post-translate.component';
 import { TranslateService } from '@ngx-translate/core';
 import { BreakpointService, EventBusService, EventType, SessionService } from '@services';
 import { BaseComponent } from '../../base.component';
@@ -14,6 +15,8 @@ import {
   postHelpers,
 } from '@mzima-client/sdk';
 import { ConfirmModalService } from '../../core/services/confirm-modal.service';
+import { LanguageService } from '../../core/services/language.service';
+import { LanguageInterface } from '@mzima-client/sdk';
 
 @Component({
   selector: 'app-post-head',
@@ -31,6 +34,7 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
   @Output() deleted = new EventEmitter();
   @Output() statusChanged = new EventEmitter();
   public isLocked: boolean;
+  public languages: LanguageInterface[];
 
   constructor(
     protected override sessionService: SessionService,
@@ -41,6 +45,7 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
     private translate: TranslateService,
     private eventBusService: EventBusService,
     private snackBar: MatSnackBar,
+    private languageService: LanguageService,
   ) {
     super(sessionService, breakpointService);
     this.checkDesktop();
@@ -49,6 +54,7 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
 
   ngOnInit(): void {
     this.checkLock();
+    this.languages = this.languageService.getLanguages();
   }
 
   loadData(): void {}
@@ -75,6 +81,19 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
     });
   }
 
+  translatePost() {
+    this.dialog.open(PostTranslateComponent, {
+      width: '100%',
+      maxWidth: '768px',
+      panelClass: ['modal', 'select-languages-modal'],
+
+      data: {
+        post: this.post,
+        languages: this.languages,
+      },
+    });
+  }
+
   underReview() {
     this.postsService.updateStatus(this.post.id, PostStatus.Draft).subscribe((res) => {
       this.post = res.result;
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.spec.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.spec.ts
new file mode 100644
index 0000000000..9a1a44daaf
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { PostTranslateComponent } from './post-translate.component';
+
+describe('PostTranslateComponent', () => {
+  let component: PostTranslateComponent;
+  let fixture: ComponentFixture<PostTranslateComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [PostTranslateComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostTranslateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
new file mode 100644
index 0000000000..e69de29bb2

From 78fc84632da1f68fa7f4477c8d7782d8fdb3bf3a Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 13 Nov 2024 10:00:32 +0100
Subject: [PATCH 03/28] Fix language-length check

---
 .../src/app/post/post-head/post-head.component.html             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
index daeada1c9a..bb75160672 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
@@ -39,7 +39,7 @@
     tabindex="-1"
     [iconOnly]="true"
     (buttonClick)="translatePost()"
-    *ngIf="editable || post.enabled_languages.available.length > 1"
+    *ngIf="editable || post.enabled_languages.available.length > 0"
     class="post-head__control post-head__control--share"
   >
     <mat-icon

From 56a996244f07a05a6fc31659af453c5ded9ac578 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 13 Nov 2024 10:02:16 +0100
Subject: [PATCH 04/28] Translations component for posts

---
 .../post-translate.component.html             | 174 ++++++++++++++++++
 .../post-translate.component.scss             |  79 ++++++++
 .../post-translate.component.ts               | 108 +++++++++++
 libs/sdk/src/lib/services/posts.service.ts    |   4 +-
 4 files changed, 364 insertions(+), 1 deletion(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index e69de29bb2..7447ab460f 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -0,0 +1,174 @@
+<mzima-client-button
+  tabindex="-1"
+  fill="outline"
+  [iconOnly]="true"
+  color="light-gray"
+  [data-qa]="'btn-close'"
+  class="modal__close-btn"
+  [mat-dialog-close]="false"
+  ariaLabel="{{ 'modal.button.close' | translate }}"
+  (buttonClick)="closeModal()"
+>
+  <mat-icon icon svgIcon="close"></mat-icon>
+</mzima-client-button>
+<strong mat-dialog-title [data-qa]="'lang-modal-title'"
+  >{{ isTranslateMode ? 'Translate post to ' + activeLanguage.name : 'Translate post' }}
+</strong>
+
+<div mat-dialog-content>
+  <ng-container *ngIf="!isTranslateMode; else translate">
+    <p *ngIf="enabledLanguages.available.length > 0">
+      Available translations (select to see post):
+    </p>
+    <mat-form-field
+      *ngIf="enabledLanguages.available.length > 0"
+      appearance="outline"
+      class="feed-page__control"
+    >
+      <mat-select
+        name="language"
+        disableOptionCentering
+        [placeholder]="'app.select_language' | translate"
+      >
+        <mat-option *ngFor="let language of enabledLanguages.available">
+          {{ language?.name }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <div class="fields-list" *ngIf="post.allowed_privileges.includes('update')">
+      <p>Select a language to translate to, or edit:</p>
+      <div>
+        <ul role="list" class="types-list">
+          <li mat-ripple role="listitem" class="type-item">
+            <mzima-client-button
+              fill="clear"
+              color="secondary"
+              class="type-item__checkbox"
+              [disabled]="true"
+            >
+              <img
+                [alt]="defaultLanguage?.code"
+                class="flag"
+                [src]="'assets/images/flags/' + 'es.svg'"
+              />
+              {{ defaultLanguage?.name }} (Default language)
+            </mzima-client-button>
+          </li>
+          <li mat-ripple role="listitem" class="type-item" *ngFor="let language of languages">
+            <mzima-client-button
+              fill="clear"
+              color="secondary"
+              class="type-item__checkbox"
+              *ngIf="language.code !== defaultLanguage?.code"
+              (buttonClick)="selectLanguage($event, language)"
+            >
+              <img
+                [alt]="language.code"
+                class="flag"
+                [src]="'assets/images/flags/' + (language.code | lowercase) + '.svg'"
+              />
+              {{ language.name }}
+            </mzima-client-button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </ng-container>
+
+  <ng-template mat-dialog-content #translate *ngIf="post.allowed_privileges.includes('update')">
+    <div class="form-row">
+      <div class="translate_post">
+        <div class="translate_post__edit">
+          <form [formGroup]="translateForm">
+            HEJ
+
+            <div class="translate_post__fields" *ngFor="let task of post.post_content">
+              <ng-container *ngFor="let field of task.fields">
+                <div class="form-row" *ngIf="isTranslateableContent(field)">
+                  <mat-label
+                    >{{ field?.translations[activeLanguage.code]?.label || field?.label }}
+                  </mat-label>
+                  <div class="translate_post__original">
+                    <div><i>Text in original language:</i></div>
+                    <div>
+                      <p>{{ getOriginalValue(field) }}</p>
+                    </div>
+                  </div>
+                  <div class="translate_post__translation">
+                    <span class="field-label">Add your translation below:</span>
+                    <ng-container *ngIf="field.input === 'text' && field.type === 'title'">
+                      <mat-form-field appearance="outline">
+                        <input matInput name="title" id="title" [formControlName]="field.key" />
+                      </mat-form-field>
+                    </ng-container>
+                    <ng-container *ngIf="field.input === 'text' && field.type === 'description'">
+                      <mat-form-field appearance="outline">
+                        <textarea
+                          matInput
+                          name="description"
+                          id="description"
+                          rows="3"
+                          [formControlName]="field.key"
+                        ></textarea>
+                      </mat-form-field>
+                    </ng-container>
+                    <ng-container *ngIf="field.input === 'textarea'">
+                      <mat-form-field appearance="outline">
+                        <textarea
+                          matInput
+                          name="'field.id'"
+                          id="'field.id'"
+                          [formControlName]="field.key"
+                        ></textarea>
+                      </mat-form-field>
+                    </ng-container>
+                    <ng-container
+                      *ngIf="
+                        field.input === 'text' &&
+                        field.type !== 'title' &&
+                        field.type !== 'description'
+                      "
+                    >
+                      <mat-form-field appearance="outline">
+                        <input
+                          matInput
+                          name="'field.id'"
+                          id="'field.id'"
+                          [formControlName]="field.key"
+                      /></mat-form-field>
+                    </ng-container>
+                    <ng-container *ngIf="field.input === 'markdown'">
+                      <mat-form-field appearance="outline">
+                        <textarea
+                          matInput
+                          name="'field.id'"
+                          id="'field.id'"
+                          [formControlName]="field.key"
+                        ></textarea>
+                      </mat-form-field>
+                    </ng-container>
+                  </div>
+                </div>
+              </ng-container>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+
+    <div mat-dialog-actions align="end">
+      <mzima-client-button
+        (buttonClick)="closeModal()"
+        fill="outline"
+        color="secondary"
+        [mat-dialog-close]="false"
+        [data-qa]="'btn-lang-cancel'"
+      >
+        {{ 'app.cancel' | translate }}
+      </mzima-client-button>
+      <mzima-client-button (buttonClick)="saveTranslation()" [data-qa]="'btn-lang-add'">
+        {{ 'app.save' | translate }}
+      </mzima-client-button>
+    </div>
+  </ng-template>
+</div>
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
index e69de29bb2..3c8f68e94f 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
@@ -0,0 +1,79 @@
+@import 'helpers';
+
+.types-list {
+  padding: 0;
+  display: flex;
+  margin: 0 -8px;
+  flex-wrap: wrap;
+  list-style: none;
+  justify-content: flex-start;
+}
+
+.type-item {
+  display: flex;
+  cursor: pointer;
+  min-height: 46px;
+  padding: 8px 12px;
+  margin: 0 4px 8px;
+  position: relative;
+  border-radius: 4px;
+  align-items: center;
+  width: calc(50% - 8px);
+  transition: color 0.35s ease;
+  background: var(--color-neutral-10);
+  border-inline-start: 5px solid var(--color, transparent);
+
+  @include breakpoint-max($tablet) {
+    border-inline-start-width: 4px;
+    box-shadow: inset 0 0 0 1px var(--color-neutral-20);
+  }
+
+  @include breakpoint-max($mobile) {
+    width: calc(100% - 8px);
+  }
+}
+
+.flag {
+  width: 30px;
+  height: 20px;
+  object-fit: contain;
+  margin-inline-end: 5px;
+  object-position: 0 50%;
+}
+.translate_post {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  &__edit {
+    display: flex;
+    width: 100%;
+    padding: 24px 16px;
+    border-radius: 4px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 24px;
+    background: var(--Neutral-Neutral-10, #f5f5f5);
+  }
+  &__fields {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 24px;
+  }
+  .field-label {
+    font-weight: 500;
+    line-height: 160%; /* 22.4px */
+    letter-spacing: -0.07px;
+  }
+  &__original {
+    padding: 24px;
+    border: 1px solid var(--Neutral-Neutral-30, #e2e2e3);
+    background-color: white;
+    display: flex-row;
+  }
+  &__translation {
+  }
+  .mat-form-field {
+    background: white;
+  }
+}
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index e69de29bb2..323ce74d0f 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -0,0 +1,108 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { FormGroup, FormControl } from '@angular/forms';
+
+import { LanguageInterface, PostResult, PostsService } from '@mzima-client/sdk';
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import * as _ from 'lodash';
+export interface PostTranslateComponentData {
+  post: PostResult;
+  languages: LanguageInterface[];
+}
+
+@UntilDestroy()
+@Component({
+  selector: 'app-post-translate',
+  templateUrl: './post-translate.component.html',
+  styleUrls: ['./post-translate.component.scss'],
+})
+export class PostTranslateComponent implements OnInit {
+  public languages: LanguageInterface[];
+  public enabledLanguages: any;
+  public isTranslateMode: boolean;
+  public activeLanguage: LanguageInterface;
+  public defaultLanguage: LanguageInterface | undefined;
+  public post: any;
+  public translateForm: FormGroup;
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: PostTranslateComponentData,
+    private postsService: PostsService,
+  ) {}
+
+  ngOnInit(): void {
+    this.languages = this.data.languages;
+    this.isTranslateMode = false;
+    this.post = _.cloneDeep(this.data.post);
+    this.enabledLanguages = this.post.enabled_languages;
+    this.defaultLanguage = this.languages.find((lang) => lang.code === this.post.base_language);
+  }
+  closeModal() {
+    console.log('close modal');
+  }
+  saveTranslation() {
+    this.post.enabled_languages = this.enabledLanguages;
+    this.post.post_content.forEach((task: any) => {
+      task.fields
+        .filter((field: any) => field.key in this.translateForm.controls)
+        .forEach((field: any) => {
+          const translatedValue = this.translateForm.controls[field.key].value;
+          if (!field.value) {
+            field.value = {};
+          }
+          if (!field.value.translations) {
+            field.value.translations = {};
+          }
+          field.value = {
+            ...field.value,
+            translations: [
+              {
+                ...field.value.translations[0],
+                [this.activeLanguage.code]: { value: translatedValue },
+              },
+            ],
+          };
+          if (field.type === 'title' || field.type === 'description') {
+            this.post.translations = [this.activeLanguage.code] = [
+              {
+                ...this.post.translations[this.activeLanguage.code],
+                [field.type]: translatedValue,
+              },
+            ];
+          }
+        });
+    });
+    this.postsService.updateTranslations(this.post.id, this.post).subscribe((res) => {
+      console.log(res);
+    });
+  }
+  selectLanguage(event: Event, lang: LanguageInterface) {
+    this.translateForm = this.createForm();
+    this.isTranslateMode = true;
+    this.activeLanguage = lang;
+    this.enabledLanguages.available.push(lang.code);
+  }
+
+  createForm() {
+    const newForm = new FormGroup({});
+    this.post.post_content
+      .flatMap((task: any) => task.fields)
+      .filter((field: any) => this.isTranslateableContent(field))
+      .forEach((field: any) => newForm.addControl(field.key, new FormControl('')));
+    return newForm;
+  }
+
+  getOriginalValue(field: any) {
+    if (field.type === 'title') {
+      return this.post.title;
+    }
+    if (field.type === 'description') {
+      return this.post.content;
+    }
+    return field.value.value;
+  }
+
+  isTranslateableContent(field: any) {
+    return field.input === 'text' || field.input === 'textarea' || field.input === 'markdown';
+  }
+}
diff --git a/libs/sdk/src/lib/services/posts.service.ts b/libs/sdk/src/lib/services/posts.service.ts
index e3b8542949..3da3dfba60 100644
--- a/libs/sdk/src/lib/services/posts.service.ts
+++ b/libs/sdk/src/lib/services/posts.service.ts
@@ -50,7 +50,6 @@ export class PostsService extends ResourceService<any> {
   private responseObject: any;
   private awaitedResponse = new Subject<any>();
   public awaitedResponse$ = this.awaitedResponse.asObservable();
-
   constructor(
     protected override httpClient: HttpClient,
     protected override currentLoader: EnvLoader,
@@ -70,6 +69,9 @@ export class PostsService extends ResourceService<any> {
   updateStatus(id: string | number, status: string) {
     return super.patch(id, { status });
   }
+  updateTranslations(id: string, post: any) {
+    return super.patch(id, post);
+  }
 
   override post(params: any): Observable<any> {
     return super.post(params);

From 0cc52ef00a4ac82472d74f3462600fd115ec95d1 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 13 Nov 2024 10:03:52 +0100
Subject: [PATCH 05/28] Moving permissions-check

---
 .../src/app/post/post-translate/post-translate.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index 7447ab460f..d219db79da 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -75,8 +75,8 @@
     </div>
   </ng-container>
 
-  <ng-template mat-dialog-content #translate *ngIf="post.allowed_privileges.includes('update')">
-    <div class="form-row">
+  <ng-template mat-dialog-content #translate>
+    <div class="form-row" *ngIf="post.allowed_privileges.includes('update')">
       <div class="translate_post">
         <div class="translate_post__edit">
           <form [formGroup]="translateForm">

From 4eb4c9399418760c1958c96e113e2eb1efad1184 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 4 Dec 2024 15:07:21 +0100
Subject: [PATCH 06/28] Sending base-language when saving a post

---
 .../src/app/post/post-edit/post-edit.component.ts             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
index e9ceac9f8f..214eede07e 100644
--- a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
@@ -719,9 +719,9 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       this.showMessage(error, 'error');
       return;
     }
-
+    const postLanguage = this.selectedLanguage.code;
     const postData = {
-      base_language: 'en',
+      base_language: postLanguage,
       completed_stages: this.completeStages,
       content: this.description,
       description: '',

From a19fec441db86ccfe6e006b6d731f5b697ea6ef8 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 4 Dec 2024 15:12:16 +0100
Subject: [PATCH 07/28] Displaying existing post-translations in the
 translation-edit view

---
 .../post-translate.component.ts               | 27 ++++++++++++++++---
 1 file changed, 23 insertions(+), 4 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index 323ce74d0f..847ee5b5c2 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -77,10 +77,10 @@ export class PostTranslateComponent implements OnInit {
     });
   }
   selectLanguage(event: Event, lang: LanguageInterface) {
-    this.translateForm = this.createForm();
-    this.isTranslateMode = true;
     this.activeLanguage = lang;
+    this.translateForm = this.createForm();
     this.enabledLanguages.available.push(lang.code);
+    this.isTranslateMode = true;
   }
 
   createForm() {
@@ -88,7 +88,13 @@ export class PostTranslateComponent implements OnInit {
     this.post.post_content
       .flatMap((task: any) => task.fields)
       .filter((field: any) => this.isTranslateableContent(field))
-      .forEach((field: any) => newForm.addControl(field.key, new FormControl('')));
+      .forEach((field: any) => {
+        newForm.addControl(field.key, new FormControl(''));
+        const translation = this.getTranslationValue(field);
+        if (translation) {
+          newForm.get(field.key)?.setValue(translation);
+        }
+      });
     return newForm;
   }
 
@@ -102,7 +108,20 @@ export class PostTranslateComponent implements OnInit {
     return field.value.value;
   }
 
+  getTranslationValue(field: any) {
+    if (field.type === 'title') {
+      return this.post.translations?.[this.activeLanguage.code]?.title || '';
+    }
+    if (field.type === 'description') {
+      return this.post.translations?.[this.activeLanguage.code]?.content || '';
+    }
+    return field.value?.translations?.[this.activeLanguage.code]?.value || '';
+  }
+
   isTranslateableContent(field: any) {
-    return field.input === 'text' || field.input === 'textarea' || field.input === 'markdown';
+    if (field.type === 'title' || field.type === 'description') return true;
+    if (field.value && field.value.value)
+      return field.input === 'text' || field.input === 'textarea' || field.input === 'markdown';
+    return false;
   }
 }

From 3e2d960b10548ba0133aa113ff11ab45b221bc0a Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Mon, 9 Dec 2024 14:45:03 +0100
Subject: [PATCH 08/28] Saving translations properly

---
 .../post-translate.component.html             |  2 -
 .../post-translate.component.ts               | 82 +++++++++++++------
 libs/sdk/src/lib/services/posts.service.ts    |  2 +-
 3 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index d219db79da..e44bfe7522 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -80,8 +80,6 @@
       <div class="translate_post">
         <div class="translate_post__edit">
           <form [formGroup]="translateForm">
-            HEJ
-
             <div class="translate_post__fields" *ngFor="let task of post.post_content">
               <ng-container *ngFor="let field of task.fields">
                 <div class="form-row" *ngIf="isTranslateableContent(field)">
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index 847ee5b5c2..49aef27b33 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -2,9 +2,11 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormGroup, FormControl } from '@angular/forms';
 
 import { LanguageInterface, PostResult, PostsService } from '@mzima-client/sdk';
+import { EventBusService, EventType } from '@services';
 import { UntilDestroy } from '@ngneat/until-destroy';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
-import * as _ from 'lodash';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
 export interface PostTranslateComponentData {
   post: PostResult;
   languages: LanguageInterface[];
@@ -28,55 +30,81 @@ export class PostTranslateComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA)
     public data: PostTranslateComponentData,
     private postsService: PostsService,
+    private eventBusService: EventBusService,
+    private snackBar: MatSnackBar,
+    private matDialogRef: MatDialogRef<PostTranslateComponent>,
   ) {}
 
   ngOnInit(): void {
     this.languages = this.data.languages;
     this.isTranslateMode = false;
-    this.post = _.cloneDeep(this.data.post);
+    this.post = structuredClone(this.data.post);
     this.enabledLanguages = this.post.enabled_languages;
     this.defaultLanguage = this.languages.find((lang) => lang.code === this.post.base_language);
   }
-  closeModal() {
-    console.log('close modal');
+  public closeModal(): void {
+    this.matDialogRef.close();
   }
   saveTranslation() {
+    this.translateForm.disable();
     this.post.enabled_languages = this.enabledLanguages;
     this.post.post_content.forEach((task: any) => {
       task.fields
         .filter((field: any) => field.key in this.translateForm.controls)
         .forEach((field: any) => {
           const translatedValue = this.translateForm.controls[field.key].value;
-          if (!field.value) {
-            field.value = {};
-          }
-          if (!field.value.translations) {
+          field.value = field.value || {};
+          field.value.translations = field.value.translations || {};
+
+          if (Array.isArray(field.value.translations) && field.value.translations.length === 0) {
             field.value.translations = {};
           }
-          field.value = {
-            ...field.value,
-            translations: [
-              {
-                ...field.value.translations[0],
-                [this.activeLanguage.code]: { value: translatedValue },
-              },
-            ],
-          };
+
+          field.value.translations[this.activeLanguage.code] = { value: translatedValue };
+
           if (field.type === 'title' || field.type === 'description') {
-            this.post.translations = [this.activeLanguage.code] = [
-              {
-                ...this.post.translations[this.activeLanguage.code],
-                [field.type]: translatedValue,
-              },
-            ];
+            this.post.translations = this.post.translations || {};
+            if (Array.isArray(this.post.translations) && this.post.translations.length === 0) {
+              this.post.translations = {};
+            }
+            this.post.translations[this.activeLanguage.code] =
+              this.post.translations[this.activeLanguage.code] || {};
+            this.post.translations[this.activeLanguage.code][field.type] = translatedValue;
           }
         });
     });
-    this.postsService.updateTranslations(this.post.id, this.post).subscribe((res) => {
-      console.log(res);
+
+    this.postsService.updateTranslations(this.post.id, this.post).subscribe({
+      next: ({ result }) => {
+        this.postsService.unlockPost(this.post.id).subscribe();
+        this.eventBusService.next({
+          type: EventType.UpdatedPost,
+          payload: result,
+        });
+      },
+      error: ({ error }) => {
+        this.translateForm.enable();
+        this.postsService.unlockPost(this.post.id).subscribe();
+        if (error.errors?.status === 422) {
+          this.showMessage(`Failed to save translation. ${error.errors.message}`, 'error');
+        }
+      },
+      complete: async () => {
+        this.showMessage('Translation saved successfully', 'success');
+        this.postsService.unlockPost(this.post.id).subscribe();
+        this.closeModal();
+      },
+    });
+  }
+
+  private showMessage(message: string, type: string) {
+    this.snackBar.open(message, 'Close', {
+      panelClass: [type],
+      duration: 3000,
     });
   }
   selectLanguage(event: Event, lang: LanguageInterface) {
+    this.postsService.lockPost(this.post.id).subscribe();
     this.activeLanguage = lang;
     this.translateForm = this.createForm();
     this.enabledLanguages.available.push(lang.code);
@@ -113,7 +141,7 @@ export class PostTranslateComponent implements OnInit {
       return this.post.translations?.[this.activeLanguage.code]?.title || '';
     }
     if (field.type === 'description') {
-      return this.post.translations?.[this.activeLanguage.code]?.content || '';
+      return this.post.translations?.[this.activeLanguage.code]?.description || '';
     }
     return field.value?.translations?.[this.activeLanguage.code]?.value || '';
   }
diff --git a/libs/sdk/src/lib/services/posts.service.ts b/libs/sdk/src/lib/services/posts.service.ts
index 3da3dfba60..e323495000 100644
--- a/libs/sdk/src/lib/services/posts.service.ts
+++ b/libs/sdk/src/lib/services/posts.service.ts
@@ -70,7 +70,7 @@ export class PostsService extends ResourceService<any> {
     return super.patch(id, { status });
   }
   updateTranslations(id: string, post: any) {
-    return super.patch(id, post);
+    return super.update(id, post);
   }
 
   override post(params: any): Observable<any> {

From 2ac1c9d64fdcc0e7a734ae2db46ea984d61315e7 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Tue, 10 Dec 2024 16:31:43 +0100
Subject: [PATCH 09/28] Displaying translations in post-details

---
 .../app/core/services/event-bus.service.ts    |  1 +
 .../post-details/post-details.component.html  | 28 +++++++++++++++----
 .../post-details/post-details.component.ts    | 13 +++++++++
 libs/sdk/src/lib/models/posts.interface.ts    |  1 +
 4 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/apps/web-mzima-client/src/app/core/services/event-bus.service.ts b/apps/web-mzima-client/src/app/core/services/event-bus.service.ts
index 4edcfbb07c..2f3ec85370 100644
--- a/apps/web-mzima-client/src/app/core/services/event-bus.service.ts
+++ b/apps/web-mzima-client/src/app/core/services/event-bus.service.ts
@@ -22,6 +22,7 @@ export const enum EventType {
   RefreshSurveysCounters = 'REFRESH_SURVEYS_COUNTERS',
   StopExportPolling = 'STOP_EXPORT_POLLING',
   ExportDone = 'EXPORT_DONE',
+  DisplayTranslatedPost = 'DISPLAY_TRANSLATED_POST',
 }
 
 export interface BusEvent<T = any> {
diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
index 7d93b732e1..5b180f4bd9 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
@@ -31,14 +31,21 @@ <h3>{{ post.form.name }}</h3>
       </div>
 
       <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
-        {{ post.title || post.content }}
+        {{
+          post.translations[displayLanguage]?.title ||
+            post.title ||
+            post.translations[displayLanguage]?.description || post.content
+        }}
       </h2>
       <div class="post__metadata-container">
         <app-post-metadata *ngIf="post.id" [post]="post"></app-post-metadata>
       </div>
 
       <div class="post__description" *ngIf="post.title?.length && post.content?.length">
-        <p [innerHTML]="post.content" data-qa="postDescriptionValue"></p>
+        <p
+          [innerHTML]="post.translations[displayLanguage]?.description || post.content"
+          data-qa="postDescriptionValue"
+        ></p>
       </div>
 
       <ng-container *ngFor="let post_content of post.post_content; let i = index">
@@ -121,12 +128,21 @@ <h3>{{ field.label }}</h3>
                   <p *ngIf="!field.value.value">-</p>
                 </ng-container>
                 <ng-container *ngIf="field.label !== 'Media Link'">
-                  <p>{{ field.value.value || '-' }}</p>
+                  <p>
+                    {{
+                      field.value.translations[displayLanguage]?.value || field.value.value || '-'
+                    }}
+                  </p>
                 </ng-container>
               </ng-container>
 
               <ng-container *ngIf="field.input === 'textarea'">
-                <p [innerHTML]="field.value.value" data-qa="longTextValue"></p>
+                <p
+                  [innerHTML]="
+                    field.value.translations[displayLanguage]?.value || field.value.value
+                  "
+                  data-qa="longTextValue"
+                ></p>
               </ng-container>
 
               <ng-container *ngIf="field.input === 'checkbox'">
@@ -226,7 +242,9 @@ <h3>{{ field.label }}</h3>
 
               <ng-container *ngIf="field.input === 'markdown'">
                 <span class="code-container">
-                  <code>{{ field.value.value || '-' }}</code>
+                  <code>{{
+                    field.value.translations[displayLanguage]?.value || field.value.value || '-'
+                  }}</code>
                 </span>
               </ng-container>
             </div>
diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
index 5de4fd001c..0f974d5962 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
@@ -26,6 +26,7 @@ import {
 } from '@mzima-client/sdk';
 import { TranslateService } from '@ngx-translate/core';
 import { lastValueFrom } from 'rxjs';
+import { untilDestroyed } from '@ngneat/until-destroy';
 import { BaseComponent } from '../../base.component';
 import { preparingVideoUrl } from '../../core/helpers/validators';
 import { dateHelper } from '@helpers';
@@ -51,6 +52,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
   public isPostLoading: boolean = true;
   public isManagePosts: boolean = false;
   public postChanged: boolean;
+  public displayLanguage: string;
 
   constructor(
     protected override sessionService: SessionService,
@@ -82,9 +84,20 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
         this.postId = Number(params['id']);
 
         this.getPost(this.postId);
+        this.translatePost();
       }
     });
   }
+  translatePost() {
+    this.eventBusService
+      .on(EventType.DisplayTranslatedPost)
+      .pipe(untilDestroyed(this))
+      .subscribe({
+        next: (language) => {
+          this.displayLanguage = language.code;
+        },
+      });
+  }
 
   loadData(): void {}
 
diff --git a/libs/sdk/src/lib/models/posts.interface.ts b/libs/sdk/src/lib/models/posts.interface.ts
index 4b01240715..995c096088 100644
--- a/libs/sdk/src/lib/models/posts.interface.ts
+++ b/libs/sdk/src/lib/models/posts.interface.ts
@@ -81,6 +81,7 @@ export enum PostStatus {
 }
 
 export interface PostResult {
+  translations: any;
   allowed_privileges: string[];
   author_email?: string;
   author_realname?: string;

From 6f8cb9d39bcf7402b33d89f3d1236da3f7375f9a Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 11 Dec 2024 16:26:23 +0100
Subject: [PATCH 10/28] Fixing error when saving translations

---
 .../app/post/post-edit/post-edit.component.ts |  3 ++-
 .../post-translate.component.html             | 20 +++++++++----------
 .../post-translate.component.ts               | 17 +++++++++++++---
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
index 214eede07e..549a984b02 100644
--- a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
@@ -719,7 +719,8 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       this.showMessage(error, 'error');
       return;
     }
-    const postLanguage = this.selectedLanguage.code;
+    // should be site-language
+    const postLanguage = this.selectedLanguage?.code || 'en';
     const postData = {
       base_language: postLanguage,
       completed_stages: this.completeStages,
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index e44bfe7522..a271024418 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -17,11 +17,9 @@
 
 <div mat-dialog-content>
   <ng-container *ngIf="!isTranslateMode; else translate">
-    <p *ngIf="enabledLanguages.available.length > 0">
-      Available translations (select to see post):
-    </p>
+    <p *ngIf="enabledLanguages.length > 0">Available translations (select to see post):</p>
     <mat-form-field
-      *ngIf="enabledLanguages.available.length > 0"
+      *ngIf="enabledLanguages?.length > 0"
       appearance="outline"
       class="feed-page__control"
     >
@@ -29,9 +27,11 @@
         name="language"
         disableOptionCentering
         [placeholder]="'app.select_language' | translate"
+        [(value)]="displayPostLanguage"
+        (selectionChange)="displayTranslatedPost($event)"
       >
-        <mat-option *ngFor="let language of enabledLanguages.available">
-          {{ language?.name }}
+        <mat-option *ngFor="let language of enabledLanguages" [value]="language">
+          {{ language.name }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -39,7 +39,7 @@
       <p>Select a language to translate to, or edit:</p>
       <div>
         <ul role="list" class="types-list">
-          <li mat-ripple role="listitem" class="type-item">
+          <li mat-ripple role="listitem" class="type-item" *ngIf="defaultLanguage">
             <mzima-client-button
               fill="clear"
               color="secondary"
@@ -47,11 +47,11 @@
               [disabled]="true"
             >
               <img
-                [alt]="defaultLanguage?.code"
+                [alt]="defaultLanguage.code"
                 class="flag"
-                [src]="'assets/images/flags/' + 'es.svg'"
+                [src]="'assets/images/flags/' + (defaultLanguage.code | lowercase) + '.svg'"
               />
-              {{ defaultLanguage?.name }} (Default language)
+              {{ defaultLanguage.name }} (Default language)
             </mzima-client-button>
           </li>
           <li mat-ripple role="listitem" class="type-item" *ngFor="let language of languages">
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index 49aef27b33..7d4de8cedb 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -5,6 +5,7 @@ import { LanguageInterface, PostResult, PostsService } from '@mzima-client/sdk';
 import { EventBusService, EventType } from '@services';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSelectChange } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 
 export interface PostTranslateComponentData {
@@ -26,6 +27,7 @@ export class PostTranslateComponent implements OnInit {
   public defaultLanguage: LanguageInterface | undefined;
   public post: any;
   public translateForm: FormGroup;
+  public displayPostLanguage: LanguageInterface;
   constructor(
     @Inject(MAT_DIALOG_DATA)
     public data: PostTranslateComponentData,
@@ -39,15 +41,23 @@ export class PostTranslateComponent implements OnInit {
     this.languages = this.data.languages;
     this.isTranslateMode = false;
     this.post = structuredClone(this.data.post);
-    this.enabledLanguages = this.post.enabled_languages;
+    this.enabledLanguages = this.languages.filter((lang) =>
+      this.post.enabled_languages.available.includes(lang.code),
+    );
     this.defaultLanguage = this.languages.find((lang) => lang.code === this.post.base_language);
   }
   public closeModal(): void {
     this.matDialogRef.close();
   }
+  public displayTranslatedPost(event: MatSelectChange) {
+    this.eventBusService.next({
+      type: EventType.DisplayTranslatedPost,
+      payload: event.value,
+    });
+    this.closeModal();
+  }
   saveTranslation() {
     this.translateForm.disable();
-    this.post.enabled_languages = this.enabledLanguages;
     this.post.post_content.forEach((task: any) => {
       task.fields
         .filter((field: any) => field.key in this.translateForm.controls)
@@ -73,6 +83,7 @@ export class PostTranslateComponent implements OnInit {
           }
         });
     });
+    this.post.enabled_languages = { default: 'en', available: this.enabledLanguages };
 
     this.postsService.updateTranslations(this.post.id, this.post).subscribe({
       next: ({ result }) => {
@@ -107,7 +118,7 @@ export class PostTranslateComponent implements OnInit {
     this.postsService.lockPost(this.post.id).subscribe();
     this.activeLanguage = lang;
     this.translateForm = this.createForm();
-    this.enabledLanguages.available.push(lang.code);
+    this.enabledLanguages.push(lang.code);
     this.isTranslateMode = true;
   }
 

From 0dd66fbd37e7f989e69cf6e59160be8c554ea221 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Thu, 12 Dec 2024 19:10:32 +0100
Subject: [PATCH 11/28] New alert for success/info

---
 apps/web-mzima-client/src/styles.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/web-mzima-client/src/styles.scss b/apps/web-mzima-client/src/styles.scss
index c7238e2ec8..c6a2c49f0c 100644
--- a/apps/web-mzima-client/src/styles.scss
+++ b/apps/web-mzima-client/src/styles.scss
@@ -133,6 +133,14 @@ a {
   .notice {
     margin: 0;
   }
+
+  &.success-info {
+    background-color: #e4f9ed;
+    border: none;
+    border-radius: 4px;
+    padding: 16px;
+    font-style: normal;
+  }
 }
 
 .mat-drawer-container {

From caeb1400bc984b27ea6f05a5051939ecade0ea29 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Thu, 12 Dec 2024 19:15:14 +0100
Subject: [PATCH 12/28] Info/alert-box in posts when showing a translated post

---
 .../post-details/post-details.component.html  | 12 +++++++--
 .../post-details/post-details.component.ts    | 19 +++++++++++++
 .../post/post-head/post-head.component.html   |  2 +-
 .../app/post/post-head/post-head.component.ts |  1 +
 .../post-translated.component.html            | 27 +++++++++++++++++++
 .../post-translated.component.scss            | 21 +++++++++++++++
 .../post-translated.component.spec.ts         | 24 +++++++++++++++++
 .../post-translated.component.ts              | 27 +++++++++++++++++++
 .../src/app/post/post.module.ts               |  3 +++
 libs/sdk/src/lib/models/posts.interface.ts    |  1 +
 10 files changed, 134 insertions(+), 3 deletions(-)
 create mode 100644 apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
 create mode 100644 apps/web-mzima-client/src/app/post/post-translated/post-translated.component.scss
 create mode 100644 apps/web-mzima-client/src/app/post/post-translated/post-translated.component.spec.ts
 create mode 100644 apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts

diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
index 5b180f4bd9..e400554c99 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
@@ -17,10 +17,17 @@
           [deleteable]="post.allowed_privileges.includes('delete')"
           (statusChanged)="statusChangedHandle()"
           (deleted)="deletedHandle()"
+          (openTranslationModal)="openTranslatePost()"
         >
         </app-post-head>
       </div>
-
+      <app-post-translated
+        *ngIf="displayLanguage"
+        (openTranslationModal)="openTranslatePost()"
+        (displayOriginalPost)="displayOriginalPost()"
+        [baseLanguage]="post.base_language"
+        [displayLanguage]="displayLanguage"
+      ></app-post-translated>
       <div class="post__twitter" *ngIf="post.source === 'Twitter' && post.data_source_message_id">
         <app-twitter-widget [id]="post.data_source_message_id"></app-twitter-widget>
       </div>
@@ -34,7 +41,8 @@ <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
         {{
           post.translations[displayLanguage]?.title ||
             post.title ||
-            post.translations[displayLanguage]?.description || post.content
+            post.translations[displayLanguage]?.description ||
+            post.content
         }}
       </h2>
       <div class="post__metadata-container">
diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
index 0f974d5962..5bb27f0a88 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
@@ -31,6 +31,8 @@ import { BaseComponent } from '../../base.component';
 import { preparingVideoUrl } from '../../core/helpers/validators';
 import { dateHelper } from '@helpers';
 import { BreakpointService, EventBusService, EventType, SessionService } from '@services';
+import { LanguageService } from '../../core/services/language.service';
+import { PostTranslateComponent } from '../post-translate/post-translate.component';
 
 @Component({
   selector: 'app-post-details',
@@ -66,6 +68,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
     private surveyService: SurveysService,
     protected sanitizer: DomSanitizer,
     private eventBusService: EventBusService,
+    private languageService: LanguageService,
   ) {
     super(sessionService, breakpointService);
     this.getUserData();
@@ -315,4 +318,20 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
   public getDate(value: any, format: string): string {
     return dateHelper.getDateWithTz(value, format);
   }
+
+  public openTranslatePost() {
+    this.dialog.open(PostTranslateComponent, {
+      width: '100%',
+      maxWidth: '768px',
+      panelClass: ['modal', 'select-languages-modal'],
+      data: {
+        post: this.post,
+        languages: this.languageService.getLanguages(),
+      },
+    });
+  }
+
+  public displayOriginalPost() {
+    this.displayLanguage = '';
+  }
 }
diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
index bb75160672..c1272e1a13 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
@@ -38,7 +38,7 @@
     color="gray"
     tabindex="-1"
     [iconOnly]="true"
-    (buttonClick)="translatePost()"
+    (buttonClick)="openTranslationModal.emit()"
     *ngIf="editable || post.enabled_languages.available.length > 0"
     class="post-head__control post-head__control--share"
   >
diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
index 1c2ff3da84..90e9732c98 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
@@ -33,6 +33,7 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
   @Output() refresh = new EventEmitter();
   @Output() deleted = new EventEmitter();
   @Output() statusChanged = new EventEmitter();
+  @Output() openTranslationModal = new EventEmitter();
   public isLocked: boolean;
   public languages: LanguageInterface[];
 
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
new file mode 100644
index 0000000000..a0e777c71c
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
@@ -0,0 +1,27 @@
+<ng-container>
+  <div class="alert success-info">
+    <div>
+      <mat-icon class="icon" icon svgIcon="translate"></mat-icon>
+    </div>
+    <div>
+      <h3>Translated from {{ getLanguageName(baseLanguage) }}</h3>
+      <p>
+        This post was translated from {{ getLanguageName(baseLanguage) }} to your selected language
+        {{ getLanguageName(displayLanguage) }}.
+        <a (click)="openTranslations()" class="link-blue">Change language</a>
+      </p>
+      <mzima-client-button
+        class="original-post"
+        matSuffix
+        fill="clear"
+        color="secondary"
+        size="medium"
+        (buttonClick)="originalPost()"
+        iconPosition="first"
+      >
+        <mat-icon iconPrefix svgIcon="eye-open"></mat-icon>
+        See original
+      </mzima-client-button>
+    </div>
+  </div>
+</ng-container>
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.scss b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.scss
new file mode 100644
index 0000000000..a890fefeae
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.scss
@@ -0,0 +1,21 @@
+.alert {
+  display: flex;
+  .icon {
+    width: 1em;
+    height: 1em;
+    font-size: 32px;
+    margin-inline-end: 18px;
+    margin-top: -2px;
+  }
+  .link-blue {
+    color: #006acd;
+  }
+  ::ng-deep {
+    .original-post {
+      button {
+        width: unset;
+        padding: 4px;
+      }
+    }
+  }
+}
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.spec.ts b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.spec.ts
new file mode 100644
index 0000000000..e4e98315d6
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { PostTranslatedComponent } from './post-translated.component';
+
+describe('PostTranslatedComponent', () => {
+  let component: PostTranslatedComponent;
+  let fixture: ComponentFixture<PostTranslatedComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [PostTranslatedComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PostTranslatedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts
new file mode 100644
index 0000000000..0b65edde87
--- /dev/null
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts
@@ -0,0 +1,27 @@
+import { Component, EventEmitter, Output, Input } from '@angular/core';
+import { LanguageService } from '../../core/services/language.service';
+
+@Component({
+  selector: 'app-post-translated',
+  templateUrl: './post-translated.component.html',
+  styleUrls: ['./post-translated.component.scss'],
+})
+export class PostTranslatedComponent {
+  @Output() public displayOriginalPost = new EventEmitter<Event>();
+  @Output() public openTranslationModal = new EventEmitter<Event>();
+  @Input() public baseLanguage: string;
+  @Input() public displayLanguage: string;
+  constructor(private languageService: LanguageService) {}
+
+  public getLanguageName(code: string) {
+    return this.languageService.getLanguages().find((lang) => lang.code === code)?.name || code;
+  }
+
+  originalPost() {
+    this.displayOriginalPost.emit();
+  }
+
+  openTranslations() {
+    this.openTranslationModal.emit();
+  }
+}
diff --git a/apps/web-mzima-client/src/app/post/post.module.ts b/apps/web-mzima-client/src/app/post/post.module.ts
index 0079d4eb6b..1611210f53 100644
--- a/apps/web-mzima-client/src/app/post/post.module.ts
+++ b/apps/web-mzima-client/src/app/post/post.module.ts
@@ -40,6 +40,7 @@ import { PostNotFoundComponent } from './post-not-found/post-not-found.component
 import { PostNotAllowedComponent } from './post-not-allowed/post-not-allowed.component';
 import { PostConversationComponent } from './post-conversation/post-conversation.component';
 import { PostTranslateComponent } from './post-translate/post-translate.component';
+import { PostTranslatedComponent } from './post-translated/post-translated.component';
 
 @NgModule({
   declarations: [
@@ -56,6 +57,7 @@ import { PostTranslateComponent } from './post-translate/post-translate.componen
     PostNotAllowedComponent,
     PostConversationComponent,
     PostTranslateComponent,
+    PostTranslatedComponent,
   ],
   imports: [
     CommonModule,
@@ -98,6 +100,7 @@ import { PostTranslateComponent } from './post-translate/post-translate.componen
     PostNotFoundComponent,
     PostNotAllowedComponent,
     PostConversationComponent,
+    PostTranslatedComponent,
   ],
 })
 export class PostModule {}
diff --git a/libs/sdk/src/lib/models/posts.interface.ts b/libs/sdk/src/lib/models/posts.interface.ts
index 995c096088..1ef1919770 100644
--- a/libs/sdk/src/lib/models/posts.interface.ts
+++ b/libs/sdk/src/lib/models/posts.interface.ts
@@ -82,6 +82,7 @@ export enum PostStatus {
 
 export interface PostResult {
   translations: any;
+  base_language: string;
   allowed_privileges: string[];
   author_email?: string;
   author_realname?: string;

From 53cfa3f6d031faae7e27abf3f411f16198cb9f48 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Thu, 12 Dec 2024 20:41:02 +0100
Subject: [PATCH 13/28] Displaying post in translated language after saving
 post

---
 .../post-details/post-details.component.ts    |  9 +++++++-
 .../post-translate.component.ts               | 21 +++++++------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
index 5bb27f0a88..81345b731f 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
@@ -320,7 +320,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
   }
 
   public openTranslatePost() {
-    this.dialog.open(PostTranslateComponent, {
+    const dialogRef = this.dialog.open(PostTranslateComponent, {
       width: '100%',
       maxWidth: '768px',
       panelClass: ['modal', 'select-languages-modal'],
@@ -329,6 +329,13 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
         languages: this.languageService.getLanguages(),
       },
     });
+
+    dialogRef.afterClosed().subscribe((response) => {
+      if (response) {
+        this.post = response.post;
+        this.displayLanguage = response.displayLanguage.code;
+      }
+    });
   }
 
   public displayOriginalPost() {
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index 7d4de8cedb..2e6059307a 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -46,8 +46,8 @@ export class PostTranslateComponent implements OnInit {
     );
     this.defaultLanguage = this.languages.find((lang) => lang.code === this.post.base_language);
   }
-  public closeModal(): void {
-    this.matDialogRef.close();
+  public closeModal(ref?: any): void {
+    this.matDialogRef.close(ref);
   }
   public displayTranslatedPost(event: MatSelectChange) {
     this.eventBusService.next({
@@ -84,26 +84,19 @@ export class PostTranslateComponent implements OnInit {
         });
     });
     this.post.enabled_languages = { default: 'en', available: this.enabledLanguages };
+    delete this.post.completed_stages;
 
     this.postsService.updateTranslations(this.post.id, this.post).subscribe({
       next: ({ result }) => {
         this.postsService.unlockPost(this.post.id).subscribe();
-        this.eventBusService.next({
-          type: EventType.UpdatedPost,
-          payload: result,
-        });
+        this.showMessage('Translation saved successfully', 'success');
+        this.postsService.unlockPost(this.post.id).subscribe();
+        this.closeModal({ displayLanguage: this.activeLanguage, post: result });
       },
       error: ({ error }) => {
         this.translateForm.enable();
         this.postsService.unlockPost(this.post.id).subscribe();
-        if (error.errors?.status === 422) {
-          this.showMessage(`Failed to save translation. ${error.errors.message}`, 'error');
-        }
-      },
-      complete: async () => {
-        this.showMessage('Translation saved successfully', 'success');
-        this.postsService.unlockPost(this.post.id).subscribe();
-        this.closeModal();
+        this.showMessage(`Failed to save translation. ${error.errors.message}`, 'error');
       },
     });
   }

From 08850aaf9e53830c6be4bb87a35459542be29ad1 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Thu, 12 Dec 2024 20:56:21 +0100
Subject: [PATCH 14/28] Displaying survey-questions in selected language if
 available

---
 .../src/app/post/post-details/post-details.component.html   | 6 +++---
 libs/sdk/src/lib/models/posts.interface.ts                  | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
index e400554c99..ea4226b05f 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.html
@@ -33,8 +33,8 @@
       </div>
 
       <div class="post__survey" *ngIf="post.form">
-        <h3>{{ post.form.name }}</h3>
-        <p>{{ post.form.description }}</p>
+        <h3>{{ post.form.translations[displayLanguage]?.name || post.form.name }}</h3>
+        <p>{{ post.form.translations[displayLanguage]?.description || post.form.description }}</p>
       </div>
 
       <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
@@ -75,7 +75,7 @@ <h2 *ngIf="post.title?.length || post.content?.length" data-qa="postTitleValue">
               *ngIf="field.input !== 'tags' ? field.value : field.value?.length"
               class="post__group"
             >
-              <h3>{{ field.label }}</h3>
+              <h3>{{ field.translations[displayLanguage]?.label || field.label }}</h3>
 
               <ng-container *ngIf="field.input === 'tags'">
                 <ng-container *ngFor="let category of field.value">
diff --git a/libs/sdk/src/lib/models/posts.interface.ts b/libs/sdk/src/lib/models/posts.interface.ts
index 1ef1919770..cc98ea9b8d 100644
--- a/libs/sdk/src/lib/models/posts.interface.ts
+++ b/libs/sdk/src/lib/models/posts.interface.ts
@@ -128,6 +128,7 @@ interface PostForm {
   url: string;
   description?: string;
   name?: string;
+  translations: any;
 }
 
 export interface PostContent {

From fe9b90161e63774a6006ca5ea2fee3b8bf40c101 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Fri, 13 Dec 2024 10:42:30 +0100
Subject: [PATCH 15/28] Hiding translation-icon in list

---
 .../post/post-head/post-head.component.html   |  2 +-
 .../app/post/post-head/post-head.component.ts | 21 +++++++------------
 .../post-preview/post-preview.component.html  |  1 +
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
index c1272e1a13..7c23c586f1 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.html
@@ -39,7 +39,7 @@
     tabindex="-1"
     [iconOnly]="true"
     (buttonClick)="openTranslationModal.emit()"
-    *ngIf="editable || post.enabled_languages.available.length > 0"
+    *ngIf="showTranslationsIcon()"
     class="post-head__control post-head__control--share"
   >
     <mat-icon
diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
index 80ef40c5ae..0951853da8 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
@@ -2,7 +2,6 @@ import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { CollectionsComponent } from '../../shared/components';
-import { PostTranslateComponent } from '../post-translate/post-translate.component';
 import { TranslateService } from '@ngx-translate/core';
 import { BreakpointService, EventBusService, EventType, SessionService } from '@services';
 import { BaseComponent } from '../../base.component';
@@ -23,6 +22,7 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
   @Input() public editable: boolean;
   @Input() public feedView: boolean;
   @Input() public deleteable: boolean;
+  @Input() public hideTranslationsIcon: boolean;
   @Output() edit = new EventEmitter();
   @Output() refresh = new EventEmitter();
   @Output() deleted = new EventEmitter();
@@ -76,19 +76,6 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
     });
   }
 
-  translatePost() {
-    this.dialog.open(PostTranslateComponent, {
-      width: '100%',
-      maxWidth: '768px',
-      panelClass: ['modal', 'select-languages-modal'],
-
-      data: {
-        post: this.post,
-        languages: this.languages,
-      },
-    });
-  }
-
   underReview() {
     this.postsService.updateStatus(this.post.id, PostStatus.Draft).subscribe((res) => {
       this.post = res.result;
@@ -185,4 +172,10 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
       duration,
     });
   }
+  public showTranslationsIcon() {
+    const languagesAvailabe =
+      this.post && this.post.enabled_languages && this.post.enabled_languages.available;
+    const needToHideIcon = this.hideTranslationsIcon && this.feedView;
+    return !needToHideIcon && (languagesAvailabe || this.editable);
+  }
 }
diff --git a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
index 772da88e31..05fb48f59d 100644
--- a/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
+++ b/apps/web-mzima-client/src/app/post/post-preview/post-preview.component.html
@@ -21,6 +21,7 @@
       [deleteable]="post.allowed_privileges.includes('delete')"
       (deleted)="deletedHandle()"
       (statusChanged)="statusChangedHandle()"
+      [hideTranslationsIcon]="true"
     >
     </app-post-head>
   </div>

From 3cc3a57999845cc7cc2156615ad8cd38bfe3fe33 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Fri, 13 Dec 2024 14:32:35 +0100
Subject: [PATCH 16/28] Preserving translations when editing a post

---
 .../src/app/post/post-edit/post-edit.component.ts     | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
index 0765d684a0..f05e2740e9 100644
--- a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
@@ -565,11 +565,12 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   }
 
   async preparationData(): Promise<any> {
-    for (const task of this.tasks) {
+    for (const [index, task] of this.tasks.entries()) {
       task.fields = await Promise.all(
         task.fields.map(
           async (field: { key: string | number; input: string; type: string; options: any }) => {
             let value: any = {
+              translations: [],
               value: this.form.value[field.key],
             };
 
@@ -705,8 +706,13 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
                   this.form.value[field.key]?.map((fieldValue: any) => fieldValue.value) || [];
                 break;
               default:
+                const postField = this.post.post_content[index].fields.find(
+                  (f: any) => f.key === field.key,
+                );
                 value.value = this.form.value[field.key] || null;
+                value.translations = postField?.value?.translations || [];
             }
+
             return {
               ...field,
               value,
@@ -737,13 +743,13 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       completed_stages: this.completeStages,
       content: this.description,
       description: '',
-      enabled_languages: {},
       form_id: this.formId,
       locale: 'en_US',
       post_content: this.tasks,
       published_to: [],
       title: this.title,
       type: 'report',
+      translations: this.post?.translations || [],
     };
 
     if (!this.form.valid) this.form.markAllAsTouched();
@@ -759,6 +765,7 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   }
 
   private updatePost(postId: number, postData: any) {
+    console.log(postData);
     this.postsService.update(postId, postData).subscribe({
       next: ({ result }) => {
         this.postsService.unlockPost(postId).subscribe();

From edb49c02af35794f993bbe9168cffe1c2d5d5b12 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Fri, 13 Dec 2024 14:47:52 +0100
Subject: [PATCH 17/28] Using full language-list for post-translations

---
 .../src/app/core/services/language.service.ts |   4 +
 .../post-details/post-details.component.ts    |   2 +-
 .../app/post/post-head/post-head.component.ts |  12 +-
 .../post-translate.component.html             |  10 -
 .../post-translate.component.ts               |   2 +-
 .../src/assets/locales/entity-languages.json  | 390 ++++++++++++++++++
 6 files changed, 399 insertions(+), 21 deletions(-)
 create mode 100644 apps/web-mzima-client/src/assets/locales/entity-languages.json

diff --git a/apps/web-mzima-client/src/app/core/services/language.service.ts b/apps/web-mzima-client/src/app/core/services/language.service.ts
index cbd54c874b..6ab674cfc5 100644
--- a/apps/web-mzima-client/src/app/core/services/language.service.ts
+++ b/apps/web-mzima-client/src/app/core/services/language.service.ts
@@ -4,6 +4,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { BehaviorSubject } from 'rxjs';
 import { LanguageInterface } from '@mzima-client/sdk';
 import LangJSON from '../../../assets/locales/languages.json';
+import entityLanguages from '../../../assets/locales/entity-languages.json';
 import { SessionService } from './session.service';
 
 @Injectable({
@@ -41,6 +42,9 @@ export class LanguageService {
   private set initialLanguage(value: string) {
     localStorage.setItem(this.languageKey, value);
   }
+  getEntityLanguages() {
+    return entityLanguages;
+  }
 
   getLanguages(): LanguageInterface[] {
     if (LangJSON.languages && LangJSON.languages.length > 0) {
diff --git a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
index 2437e92b9b..a0710a29bf 100644
--- a/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-details/post-details.component.ts
@@ -339,7 +339,7 @@ export class PostDetailsComponent extends BaseComponent implements OnChanges, On
       panelClass: ['modal', 'select-languages-modal'],
       data: {
         post: this.post,
-        languages: this.languageService.getLanguages(),
+        languages: this.languageService.getEntityLanguages(),
       },
     });
 
diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
index 0951853da8..c18f46c7c4 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
@@ -8,8 +8,6 @@ import { BaseComponent } from '../../base.component';
 import { ShareModalComponent } from '../../shared/components';
 import { PostResult, PostsService, PostStatus, postHelpers } from '@mzima-client/sdk';
 import { ConfirmModalService } from '../../core/services/confirm-modal.service';
-import { LanguageService } from '../../core/services/language.service';
-import { LanguageInterface } from '@mzima-client/sdk';
 
 @Component({
   selector: 'app-post-head',
@@ -29,7 +27,6 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
   @Output() statusChanged = new EventEmitter();
   @Output() openTranslationModal = new EventEmitter();
   public isLocked: boolean;
-  public languages: LanguageInterface[];
 
   constructor(
     protected override sessionService: SessionService,
@@ -40,7 +37,6 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
     private translate: TranslateService,
     private eventBusService: EventBusService,
     private snackBar: MatSnackBar,
-    private languageService: LanguageService,
   ) {
     super(sessionService, breakpointService);
     this.checkDesktop();
@@ -49,7 +45,6 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
 
   ngOnInit(): void {
     this.checkLock();
-    this.languages = this.languageService.getLanguages();
   }
 
   loadData(): void {}
@@ -173,9 +168,8 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
     });
   }
   public showTranslationsIcon() {
-    const languagesAvailabe =
-      this.post && this.post.enabled_languages && this.post.enabled_languages.available;
-    const needToHideIcon = this.hideTranslationsIcon && this.feedView;
-    return !needToHideIcon && (languagesAvailabe || this.editable);
+    const languagesAvailabe = this.post?.enabled_languages?.available;
+    const hideIcon = this.hideTranslationsIcon && this.feedView;
+    return !hideIcon && (languagesAvailabe || this.editable);
   }
 }
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index a271024418..8d1f311c04 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -46,11 +46,6 @@
               class="type-item__checkbox"
               [disabled]="true"
             >
-              <img
-                [alt]="defaultLanguage.code"
-                class="flag"
-                [src]="'assets/images/flags/' + (defaultLanguage.code | lowercase) + '.svg'"
-              />
               {{ defaultLanguage.name }} (Default language)
             </mzima-client-button>
           </li>
@@ -62,11 +57,6 @@
               *ngIf="language.code !== defaultLanguage?.code"
               (buttonClick)="selectLanguage($event, language)"
             >
-              <img
-                [alt]="language.code"
-                class="flag"
-                [src]="'assets/images/flags/' + (language.code | lowercase) + '.svg'"
-              />
               {{ language.name }}
             </mzima-client-button>
           </li>
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index 2e6059307a..ee6e67995a 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -42,7 +42,7 @@ export class PostTranslateComponent implements OnInit {
     this.isTranslateMode = false;
     this.post = structuredClone(this.data.post);
     this.enabledLanguages = this.languages.filter((lang) =>
-      this.post.enabled_languages.available.includes(lang.code),
+      this.post.enabled_languages?.available?.includes(lang.code),
     );
     this.defaultLanguage = this.languages.find((lang) => lang.code === this.post.base_language);
   }
diff --git a/apps/web-mzima-client/src/assets/locales/entity-languages.json b/apps/web-mzima-client/src/assets/locales/entity-languages.json
new file mode 100644
index 0000000000..bb0044cb69
--- /dev/null
+++ b/apps/web-mzima-client/src/assets/locales/entity-languages.json
@@ -0,0 +1,390 @@
+[{ "code": "ach", "name": "Acoli" },
+    { "code": "ady", "name": "Adyghe" },
+    { "code": "af", "name": "Afrikaans" },
+    { "code": "af-ZA", "name": "Afrikaans (South Africa)" },
+    { "code": "ak", "name": "Akan" },
+    { "code": "sq", "name": "Albanian" },
+    { "code": "sq-AL", "name": "Albanian (Albania)" },
+    { "code": "aln", "name": "Albanian Gheg" },
+    { "code": "am", "name": "Amharic" },
+    { "code": "am-ET", "name": "Amharic (Ethiopia)" },
+    { "code": "ar", "name": "Arabic" },
+    { "code": "ar-EG", "name": "Arabic (Egypt)" },
+    { "code": "ar-SA", "name": "Arabic (Saudi Arabia)" },
+    { "code": "ar-SD", "name": "Arabic (Sudan)" },
+    { "code": "ar-SY", "name": "Arabic (Syria)" },
+    { "code": "ar-AA", "name": "Arabic (Unitag)" },
+    { "code": "an", "name": "Aragonese" },
+    { "code": "hy", "name": "Armenian" },
+    { "code": "hy-AM", "name": "Armenian (Armenia)" },
+    { "code": "as", "name": "Assamese" },
+    { "code": "as-IN", "name": "Assamese (India)" },
+    { "code": "ast", "name": "Asturian" },
+    { "code": "ast-ES", "name": "Asturian (Spain)" },
+    { "code": "az", "name": "Azerbaijani" },
+    { "code": "az@Arab", "name": "Azerbaijani (Arabic)" },
+    { "code": "az-AZ", "name": "Azerbaijani (Azerbaijan)" },
+    { "code": "az-IR", "name": "Azerbaijani (Iran)" },
+    { "code": "az@latin", "name": "Azerbaijani (Latin)" },
+    { "code": "bal", "name": "Balochi" },
+    { "code": "ba", "name": "Bashkir" },
+    { "code": "eu", "name": "Basque" },
+    { "code": "eu-ES", "name": "Basque (Spain)" },
+    { "code": "bar", "name": "Bavarian" },
+    { "code": "be", "name": "Belarusian" },
+    { "code": "be-BY", "name": "Belarusian (Belarus)" },
+    { "code": "be@tarask", "name": "Belarusian (Tarask)" },
+    { "code": "bn", "name": "Bengali" },
+    { "code": "bn-BD", "name": "Bengali (Bangladesh)" },
+    { "code": "bn-IN", "name": "Bengali (India)" },
+    { "code": "brx", "name": "Bodo" },
+    { "code": "bs", "name": "Bosnian" },
+    { "code": "bs-BA", "name": "Bosnian (Bosnia and Herzegovina)" },
+    { "code": "br", "name": "Breton" },
+    { "code": "bg", "name": "Bulgarian" },
+    { "code": "bg-BG", "name": "Bulgarian (Bulgaria)" },
+    { "code": "my", "name": "Burmese" },
+    { "code": "my-MM", "name": "Burmese (Myanmar)" },
+    { "code": "ca", "name": "Catalan" },
+    { "code": "ca-ES", "name": "Catalan (Spain)" },
+    { "code": "ca@valencia", "name": "Catalan (Valencian)" },
+    { "code": "ceb", "name": "Cebuano" },
+    { "code": "tzm", "name": "Central Atlas Tamazight" },
+    { "code": "hne", "name": "Chhattisgarhi" },
+    { "code": "cgg", "name": "Chiga" },
+    { "code": "zh", "name": "Chinese" },
+    { "code": "zh-CN", "name": "Chinese (China)" },
+    { "code": "zh-CN.GB2312", "name": "Chinese (China) (GB2312)" },
+    { "code": "gan", "name": "Chinese (Gan)" },
+    { "code": "hak", "name": "Chinese (Hakka)" },
+    { "code": "zh-HK", "name": "Chinese (Hong Kong)" },
+    { "code": "czh", "name": "Chinese (Huizhou)" },
+    { "code": "cjy", "name": "Chinese (Jinyu)" },
+    { "code": "lzh", "name": "Chinese (Literary)" },
+    { "code": "cmn", "name": "Chinese (Mandarin)" },
+    { "code": "mnp", "name": "Chinese (Min Bei)" },
+    { "code": "cdo", "name": "Chinese (Min Dong)" },
+    { "code": "nan", "name": "Chinese (Min Nan)" },
+    { "code": "czo", "name": "Chinese (Min Zhong)" },
+    { "code": "cpx", "name": "Chinese (Pu-Xian)" },
+    { "code": "zh-Hans", "name": "Chinese Simplified" },
+    { "code": "zh-TW", "name": "Chinese (Taiwan)" },
+    { "code": "zh-TW.Big5", "name": "Chinese (Taiwan) (Big5) " },
+    { "code": "zh-Hant", "name": "Chinese Traditional" },
+    { "code": "wuu", "name": "Chinese (Wu)" },
+    { "code": "hsn", "name": "Chinese (Xiang)" },
+    { "code": "yue", "name": "Chinese (Yue)" },
+    { "code": "cv", "name": "Chuvash" },
+    { "code": "ksh", "name": "Colognian" },
+    { "code": "kw", "name": "Cornish" },
+    { "code": "co", "name": "Corsican" },
+    { "code": "crh", "name": "Crimean Turkish" },
+    { "code": "hr", "name": "Croatian" },
+    { "code": "hr-HR", "name": "Croatian (Croatia)" },
+    { "code": "cs", "name": "Czech" },
+    { "code": "cs-CZ", "name": "Czech (Czech Republic)" },
+    { "code": "da", "name": "Danish" },
+    { "code": "da-DK", "name": "Danish (Denmark)" },
+    { "code": "dv", "name": "Divehi" },
+    { "code": "doi", "name": "Dogri" },
+    { "code": "nl", "name": "Dutch" },
+    { "code": "nl-BE", "name": "Dutch (Belgium)" },
+    { "code": "nl-NL", "name": "Dutch (Netherlands)" },
+    { "code": "dz", "name": "Dzongkha" },
+    { "code": "dz-BT", "name": "Dzongkha (Bhutan)" },
+    { "code": "en", "name": "English" },
+    { "code": "en-BD", "name": "English (Bangladesh)" },
+    { "code": "en-CA", "name": "English (Canada)" },
+    { "code": "en-GH", "name": "English (Ghana)" },
+    { "code": "en-HK", "name": "English (Hong Kong)" },
+    { "code": "en-HU", "name": "English (Hungary)" },
+    { "code": "en-IN", "name": "English (India)" },
+    { "code": "en-IE", "name": "English (Ireland)" },
+    { "code": "en-NL", "name": "English (Netherlands)" },
+    { "code": "en-NZ", "name": "English (New Zealand)" },
+    { "code": "en-NG", "name": "English (Nigeria)" },
+    { "code": "en-PK", "name": "English (Pakistan)" },
+    { "code": "en-ZA", "name": "English (South Africa)" },
+    { "code": "en-LK", "name": "English (Sri Lanka)" },
+    { "code": "en-GB", "name": "English (United Kingdom)" },
+    { "code": "en-US", "name": "English (United States)" },
+    { "code": "en-EN", "name": "English" },
+    { "code": "myv", "name": "Erzya" },
+    { "code": "eo", "name": "Esperanto" },
+    { "code": "et", "name": "Estonian" },
+    { "code": "et-EE", "name": "Estonian (Estonia)" },
+    { "code": "fo", "name": "Faroese" },
+    { "code": "fo-FO", "name": "Faroese (Faroe Islands)" },
+    { "code": "fil", "name": "Filipino" },
+    { "code": "fi", "name": "Finnish" },
+    { "code": "fi-FI", "name": "Finnish (Finland)" },
+    { "code": "frp", "name": "Franco-Provençal (Arpitan)" },
+    { "code": "fr", "name": "French" },
+    { "code": "fr-BE", "name": "French (Belgium)" },
+    { "code": "fr-CA", "name": "French (Canada)" },
+    { "code": "fr-FR", "name": "French (France)" },
+    { "code": "fr-CH", "name": "French (Switzerland)" },
+    { "code": "fur", "name": "Friulian" },
+    { "code": "ff", "name": "Fulah" },
+    { "code": "ff-SN", "name": "Fulah (Senegal)" },
+    { "code": "gd", "name": "Gaelic, Scottish" },
+    { "code": "gl", "name": "Galician" },
+    { "code": "gl-ES", "name": "Galician (Spain)" },
+    { "code": "lg", "name": "Ganda" },
+    { "code": "ka", "name": "Georgian" },
+    { "code": "ka-GE", "name": "Georgian (Georgia)" },
+    { "code": "de", "name": "German" },
+    { "code": "de-AT", "name": "German (Austria)" },
+    { "code": "de-DE", "name": "German (Germany)" },
+    { "code": "de-CH", "name": "German (Switzerland)" },
+    { "code": "el", "name": "Greek" },
+    { "code": "el-GR", "name": "Greek (Greece)" },
+    { "code": "kl", "name": "Greenlandic" },
+    { "code": "gu", "name": "Gujarati" },
+    { "code": "gu-IN", "name": "Gujarati (India)" },
+    { "code": "gun", "name": "Gun" },
+    { "code": "ht", "name": "Haitian (Haitian Creole)" },
+    { "code": "ht-HT", "name": "Haitian (Haitian Creole) (Haiti)" },
+    { "code": "ha", "name": "Hausa" },
+    { "code": "haw", "name": "Hawaiian" },
+    { "code": "he", "name": "Hebrew" },
+    { "code": "he-IL", "name": "Hebrew (Israel)" },
+    { "code": "hi", "name": "Hindi" },
+    { "code": "hi-IN", "name": "Hindi (India)" },
+    { "code": "hu", "name": "Hungarian" },
+    { "code": "hu-HU", "name": "Hungarian (Hungary)" },
+    { "code": "is", "name": "Icelandic" },
+    { "code": "is-IS", "name": "Icelandic (Iceland)" },
+    { "code": "io", "name": "Ido" },
+    { "code": "ig", "name": "Igbo" },
+    { "code": "ilo", "name": "Iloko" },
+    { "code": "id", "name": "Indonesian" },
+    { "code": "id-ID", "name": "Indonesian (Indonesia)" },
+    { "code": "ia", "name": "Interlingua" },
+    { "code": "iu", "name": "Inuktitut" },
+    { "code": "ga", "name": "Irish" },
+    { "code": "ga-IE", "name": "Irish (Ireland)" },
+    { "code": "it", "name": "Italian" },
+    { "code": "it-IT", "name": "Italian (Italy)" },
+    { "code": "it-CH", "name": "Italian (Switzerland)" },
+    { "code": "ja", "name": "Japanese" },
+    { "code": "ja-JP", "name": "Japanese (Japan)" },
+    { "code": "jv", "name": "Javanese" },
+    { "code": "kab", "name": "Kabyle" },
+    { "code": "kn", "name": "Kannada" },
+    { "code": "kn-IN", "name": "Kannada (India)" },
+    { "code": "pam", "name": "Kapampangan" },
+    { "code": "ks", "name": "Kashmiri" },
+    { "code": "ks-IN", "name": "Kashmiri (India)" },
+    { "code": "csb", "name": "Kashubian" },
+    { "code": "kk", "name": "Kazakh" },
+    { "code": "kk@Arab", "name": "Kazakh (Arabic)" },
+    { "code": "kk@Cyrl", "name": "Kazakh (Cyrillic)" },
+    { "code": "kk-KZ", "name": "Kazakh (Kazakhstan)" },
+    { "code": "kk@latin", "name": "Kazakh (Latin)" },
+    { "code": "km", "name": "Khmer" },
+    { "code": "km-KH", "name": "Khmer (Cambodia)" },
+    { "code": "rw", "name": "Kinyarwanda" },
+    { "code": "ky", "name": "Kirgyz" },
+    { "code": "tlh", "name": "Klingon" },
+    { "code": "kok", "name": "Konkani" },
+    { "code": "ko", "name": "Korean" },
+    { "code": "ko-KR", "name": "Korean (Korea)" },
+    { "code": "ku", "name": "Kurdish" },
+    { "code": "ku-IQ", "name": "Kurdish (Iraq)" },
+    { "code": "lad", "name": "Ladino" },
+    { "code": "lo", "name": "Lao" },
+    { "code": "lo-LA", "name": "Lao (Laos)" },
+    { "code": "ltg", "name": "Latgalian" },
+    { "code": "la", "name": "Latin" },
+    { "code": "lv", "name": "Latvian" },
+    { "code": "lv-LV", "name": "Latvian (Latvia)" },
+    { "code": "lez", "name": "Lezghian" },
+    { "code": "lij", "name": "Ligurian" },
+    { "code": "li", "name": "Limburgian" },
+    { "code": "ln", "name": "Lingala" },
+    { "code": "lt", "name": "Lithuanian" },
+    { "code": "lt-LT", "name": "Lithuanian (Lithuania)" },
+    { "code": "jbo", "name": "Lojban" },
+    { "code": "lmo", "name": "Lombard" },
+    { "code": "dsb", "name": "Lower Sorbian" },
+    { "code": "nds", "name": "Low German" },
+    { "code": "lb", "name": "Luxembourgish" },
+    { "code": "mk", "name": "Macedonian" },
+    { "code": "mk-MK", "name": "Macedonian (Macedonia)" },
+    { "code": "mai", "name": "Maithili" },
+    { "code": "mg", "name": "Malagasy" },
+    { "code": "ms", "name": "Malay" },
+    { "code": "ml", "name": "Malayalam" },
+    { "code": "ml-IN", "name": "Malayalam (India)" },
+    { "code": "ms-MY", "name": "Malay (Malaysia)" },
+    { "code": "mt", "name": "Maltese" },
+    { "code": "mt-MT", "name": "Maltese (Malta)" },
+    { "code": "mni", "name": "Manipuri" },
+    { "code": "mi", "name": "Maori" },
+    { "code": "arn", "name": "Mapudungun" },
+    { "code": "mr", "name": "Marathi" },
+    { "code": "mr-IN", "name": "Marathi (India)" },
+    { "code": "mh", "name": "Marshallese" },
+    { "code": "mw1", "name": "Mirandese" },
+    { "code": "mn", "name": "Mongolian" },
+    { "code": "mn-MN", "name": "Mongolian (Mongolia)" },
+    { "code": "nah", "name": "Nahuatl" },
+    { "code": "nv", "name": "Navajo" },
+    { "code": "nr", "name": "Ndebele, South" },
+    { "code": "nap", "name": "Neapolitan" },
+    { "code": "ne", "name": "Nepali" },
+    { "code": "ne-NP", "name": "Nepali (Nepal)" },
+    { "code": "nia", "name": "Nias" },
+    { "code": "nqo", "name": "N'ko" },
+    { "code": "se", "name": "Northern Sami" },
+    { "code": "nso", "name": "Northern Sotho" },
+    { "code": "no", "name": "Norwegian" },
+    { "code": "nb", "name": "Norwegian Bokmål" },
+    { "code": "nb-NO", "name": "Norwegian Bokmål (Norway)" },
+    { "code": "no-NO", "name": "Norwegian (Norway)" },
+    { "code": "nn", "name": "Norwegian Nynorsk" },
+    { "code": "nn-NO", "name": "Norwegian Nynorsk (Norway)" },
+    { "code": "ny", "name": "Nyanja" },
+    { "code": "oc", "name": "Occitan (post 1500)" },
+    { "code": "or", "name": "Oriya" },
+    { "code": "or-IN", "name": "Oriya (India)" },
+    { "code": "om", "name": "Oromo" },
+    { "code": "os", "name": "Ossetic" },
+    { "code": "pfl", "name": "Palatinate German" },
+    { "code": "pa", "name": "Panjabi (Punjabi)" },
+    { "code": "pa-IN", "name": "Panjabi (Punjabi) (India)" },
+    { "code": "pap", "name": "Papiamento" },
+    { "code": "fa", "name": "Persian" },
+    { "code": "fa-AF", "name": "Persian (Afghanistan)" },
+    { "code": "fa-IR", "name": "Persian (Iran)" },
+    { "code": "pms", "name": "Piemontese" },
+    { "code": "pl", "name": "Polish" },
+    { "code": "pl-PL", "name": "Polish (Poland)" },
+    { "code": "pt", "name": "Portuguese" },
+    { "code": "pt-BR", "name": "Portuguese (Brazil)" },
+    { "code": "pt-PT", "name": "Portuguese (Portugal)" },
+    { "code": "ps", "name": "Pushto" },
+    { "code": "ro", "name": "Romanian" },
+    { "code": "ro-RO", "name": "Romanian (Romania)" },
+    { "code": "rm", "name": "Romansh" },
+    { "code": "ru", "name": "Russian" },
+    { "code": "ru-ee", "name": "Russian (Estonia)" },
+    { "code": "ru-lv", "name": "Russian (Latvia)" },
+    { "code": "ru-lt", "name": "Russian (Lithuania)" },
+    { "code": "ru@petr1708", "name": "Russian Petrine orthography" },
+    { "code": "ru-RU", "name": "Russian (Russia)" },
+    { "code": "sah", "name": "Sakha (Yakut)" },
+    { "code": "sm", "name": "Samoan" },
+    { "code": "sa", "name": "Sanskrit" },
+    { "code": "sat", "name": "Santali" },
+    { "code": "sc", "name": "Sardinian" },
+    { "code": "sco", "name": "Scots" },
+    { "code": "sr", "name": "Serbian" },
+    { "code": "sr@Ijekavian", "name": "Serbian (Ijekavian)" },
+    { "code": "sr@ijekavianlatin", "name": "Serbian (Ijekavian Latin)" },
+    { "code": "sr@latin", "name": "Serbian (Latin)" },
+    { "code": "sr-RS@latin", "name": "Serbian (Latin) (Serbia)" },
+    { "code": "sr-RS", "name": "Serbian (Serbia)" },
+    { "code": "sn", "name": "Shona" },
+    { "code": "scn", "name": "Sicilian" },
+    { "code": "szl", "name": "Silesian" },
+    { "code": "sd", "name": "Sindhi" },
+    { "code": "si", "name": "Sinhala" },
+    { "code": "si-LK", "name": "Sinhala (Sri Lanka)" },
+    { "code": "sk", "name": "Slovak" },
+    { "code": "sk-SK", "name": "Slovak (Slovakia)" },
+    { "code": "sl", "name": "Slovenian" },
+    { "code": "sl-SI", "name": "Slovenian (Slovenia)" },
+    { "code": "so", "name": "Somali" },
+    { "code": "son", "name": "Songhay" },
+    { "code": "st", "name": "Sotho, Southern" },
+    { "code": "st-ZA", "name": "Sotho, Southern (South Africa)" },
+    { "code": "sma", "name": "Southern Sami" },
+    { "code": "es", "name": "Spanish" },
+    { "code": "es-AR", "name": "Spanish (Argentina)" },
+    { "code": "es-BO", "name": "Spanish (Bolivia)" },
+    { "code": "es-CL", "name": "Spanish (Chile)" },
+    { "code": "es-CO", "name": "Spanish (Colombia)" },
+    { "code": "es-CR", "name": "Spanish (Costa Rica)" },
+    { "code": "es-DO", "name": "Spanish (Dominican Republic)" },
+    { "code": "es-EC", "name": "Spanish (Ecuador)" },
+    { "code": "es-SV", "name": "Spanish (El Salvador)" },
+    { "code": "es-GT", "name": "Spanish (Guatemala)" },
+    { "code": "es-419", "name": "Spanish (Latin America)" },
+    { "code": "es-MX", "name": "Spanish (Mexico)" },
+    { "code": "es-NI", "name": "Spanish (Nicaragua)" },
+    { "code": "es-PA", "name": "Spanish (Panama)" },
+    { "code": "es-PY", "name": "Spanish (Paraguay)" },
+    { "code": "es-PE", "name": "Spanish (Peru)" },
+    { "code": "es-PR", "name": "Spanish (Puerto Rico)" },
+    { "code": "es-ES", "name": "Spanish (Spain)" },
+    { "code": "es-US", "name": "Spanish (United States)" },
+    { "code": "es-UY", "name": "Spanish (Uruguay)" },
+    { "code": "es-VE", "name": "Spanish (Venezuela)" },
+    { "code": "su", "name": "Sundanese" },
+    { "code": "sw", "name": "Swahili" },
+    { "code": "sw-KE", "name": "Swahili (Kenya)" },
+    { "code": "ss", "name": "Swati" },
+    { "code": "sv", "name": "Swedish" },
+    { "code": "sv-FI", "name": "Swedish (Finland)" },
+    { "code": "sv-SE", "name": "Swedish (Sweden)" },
+    { "code": "tl", "name": "Tagalog" },
+    { "code": "tl-PH", "name": "Tagalog (Philippines)" },
+    { "code": "tg", "name": "Tajik" },
+    { "code": "tg-TJ", "name": "Tajik (Tajikistan)" },
+    { "code": "tzl", "name": "Talossan" },
+    { "code": "ta", "name": "Tamil" },
+    { "code": "ta-IN", "name": "Tamil (India)" },
+    { "code": "ta-LK", "name": "Tamil (Sri-Lanka)" },
+    { "code": "tt", "name": "Tatar" },
+    { "code": "te", "name": "Telugu" },
+    { "code": "te-IN", "name": "Telugu (India)" },
+    { "code": "tet", "name": "Tetum (Tetun)" },
+    { "code": "th", "name": "Thai" },
+    { "code": "th-TH", "name": "Thai (Thailand)" },
+    { "code": "bo", "name": "Tibetan" },
+    { "code": "bo-CN", "name": "Tibetan (China)" },
+    { "code": "ti", "name": "Tigrinya" },
+    { "code": "to", "name": "Tongan" },
+    { "code": "ts", "name": "Tsonga" },
+    { "code": "tn", "name": "Tswana" },
+    { "code": "tr", "name": "Turkish" },
+    { "code": "tr-TR", "name": "Turkish (Turkey)" },
+    { "code": "tk", "name": "Turkmen" },
+    { "code": "tk-TM", "name": "Turkmen (Turkmenistan)" },
+    { "code": "udm", "name": "Udmurt" },
+    { "code": "ug", "name": "Uighur" },
+    { "code": "ug@Arab", "name": "Uighur (Arabic)" },
+    { "code": "ug@Cyrl", "name": "Uighur (Cyrillic)" },
+    { "code": "ug@Latin", "name": "Uighur (Latin)" },
+    { "code": "uk", "name": "Ukrainian" },
+    { "code": "uk-UA", "name": "Ukrainian (Ukraine)" },
+    { "code": "vmf", "name": "Upper Franconian" },
+    { "code": "hsb", "name": "Upper Sorbian" },
+    { "code": "ur", "name": "Urdu" },
+    { "code": "ur-PK", "name": "Urdu (Pakistan)" },
+    { "code": "uz", "name": "Uzbek" },
+    { "code": "uz@Arab", "name": "Uzbek (Arabic)" },
+    { "code": "uz@Cyrl", "name": "Uzbek (Cyrillic)" },
+    { "code": "uz@Latn", "name": "Uzbek (Latin)" },
+    { "code": "uz-UZ", "name": "Uzbek (Uzbekistan)" },
+    { "code": "ve", "name": "Venda" },
+    { "code": "vec", "name": "Venetian" },
+    { "code": "vi", "name": "Vietnamese" },
+    { "code": "vi-VN", "name": "Vietnamese (Viet Nam)" },
+    { "code": "vls", "name": "Vlaams" },
+    { "code": "wa", "name": "Walloon" },
+    { "code": "war", "name": "Wáray-Wáray" },
+    { "code": "cy", "name": "Welsh" },
+    { "code": "cy-GB", "name": "Welsh (United Kingdom)" },
+    { "code": "fy", "name": "Western Frisian" },
+    { "code": "fy-NL", "name": "Western Frisian (Netherlands)" },
+    { "code": "wo", "name": "Wolof" },
+    { "code": "wo-SN", "name": "Wolof (Senegal)" },
+    { "code": "xh", "name": "Xhosa" },
+    { "code": "yi", "name": "Yiddish" },
+    { "code": "yo", "name": "Yoruba" },
+    { "code": "zu", "name": "Zulu" },
+    { "code": "zu-ZA", "name": "Zulu (South Africa)" }]
+  
\ No newline at end of file

From 789abfa8ba213fee4317223cabc435552f5266df Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Mon, 16 Dec 2024 19:46:36 +0100
Subject: [PATCH 18/28] Adding validation+small style-fixes

---
 .../post-translate.component.html             | 242 +++++++++---------
 .../post-translate.component.scss             |  25 +-
 .../post-translate.component.ts               |   8 +-
 3 files changed, 148 insertions(+), 127 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index 8d1f311c04..76cac78d04 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -11,136 +11,142 @@
 >
   <mat-icon icon svgIcon="close"></mat-icon>
 </mzima-client-button>
+
 <strong mat-dialog-title [data-qa]="'lang-modal-title'"
   >{{ isTranslateMode ? 'Translate post to ' + activeLanguage.name : 'Translate post' }}
 </strong>
 
 <div mat-dialog-content>
   <ng-container *ngIf="!isTranslateMode; else translate">
-    <p *ngIf="enabledLanguages.length > 0">Available translations (select to see post):</p>
-    <mat-form-field
-      *ngIf="enabledLanguages?.length > 0"
-      appearance="outline"
-      class="feed-page__control"
-    >
-      <mat-select
-        name="language"
-        disableOptionCentering
-        [placeholder]="'app.select_language' | translate"
-        [(value)]="displayPostLanguage"
-        (selectionChange)="displayTranslatedPost($event)"
-      >
-        <mat-option *ngFor="let language of enabledLanguages" [value]="language">
-          {{ language.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+    <div class="select_language" *ngIf="enabledLanguages.length > 0">
+      <p>Available translations (select to see post):</p>
+      <mat-form-field appearance="outline" class="feed-page__control">
+        <mat-select
+          name="language"
+          disableOptionCentering
+          [placeholder]="'app.select_language' | translate"
+          [(value)]="displayPostLanguage"
+          (selectionChange)="displayTranslatedPost($event)"
+        >
+          <mat-option *ngFor="let language of enabledLanguages" [value]="language">
+            {{ language.name }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
     <div class="fields-list" *ngIf="post.allowed_privileges.includes('update')">
-      <p>Select a language to translate to, or edit:</p>
-      <div>
-        <ul role="list" class="types-list">
-          <li mat-ripple role="listitem" class="type-item" *ngIf="defaultLanguage">
-            <mzima-client-button
-              fill="clear"
-              color="secondary"
-              class="type-item__checkbox"
-              [disabled]="true"
-            >
-              {{ defaultLanguage.name }} (Default language)
-            </mzima-client-button>
-          </li>
-          <li mat-ripple role="listitem" class="type-item" *ngFor="let language of languages">
-            <mzima-client-button
-              fill="clear"
-              color="secondary"
-              class="type-item__checkbox"
-              *ngIf="language.code !== defaultLanguage?.code"
-              (buttonClick)="selectLanguage($event, language)"
-            >
-              {{ language.name }}
-            </mzima-client-button>
-          </li>
-        </ul>
-      </div>
+      <h3 class="field-label">Select a language to translate to, or edit:</h3>
+      <ul role="list" class="types-list">
+        <li mat-ripple role="listitem" class="type-item" *ngIf="defaultLanguage">
+          <mzima-client-button
+            fill="clear"
+            color="secondary"
+            class="type-item__checkbox"
+            [disabled]="true"
+          >
+            {{ defaultLanguage.name }} (Default language)
+          </mzima-client-button>
+        </li>
+        <li mat-ripple role="listitem" class="type-item" *ngFor="let language of languages">
+          <mzima-client-button
+            fill="clear"
+            color="secondary"
+            class="type-item__checkbox"
+            *ngIf="language.code !== defaultLanguage?.code"
+            (buttonClick)="selectLanguage($event, language)"
+          >
+            {{ language.name }}
+          </mzima-client-button>
+        </li>
+      </ul>
     </div>
   </ng-container>
 
   <ng-template mat-dialog-content #translate>
     <div class="form-row" *ngIf="post.allowed_privileges.includes('update')">
       <div class="translate_post">
-        <div class="translate_post__edit">
-          <form [formGroup]="translateForm">
-            <div class="translate_post__fields" *ngFor="let task of post.post_content">
-              <ng-container *ngFor="let field of task.fields">
-                <div class="form-row" *ngIf="isTranslateableContent(field)">
-                  <mat-label
-                    >{{ field?.translations[activeLanguage.code]?.label || field?.label }}
-                  </mat-label>
-                  <div class="translate_post__original">
-                    <div><i>Text in original language:</i></div>
-                    <div>
-                      <p>{{ getOriginalValue(field) }}</p>
-                    </div>
-                  </div>
-                  <div class="translate_post__translation">
-                    <span class="field-label">Add your translation below:</span>
-                    <ng-container *ngIf="field.input === 'text' && field.type === 'title'">
-                      <mat-form-field appearance="outline">
-                        <input matInput name="title" id="title" [formControlName]="field.key" />
-                      </mat-form-field>
-                    </ng-container>
-                    <ng-container *ngIf="field.input === 'text' && field.type === 'description'">
-                      <mat-form-field appearance="outline">
-                        <textarea
-                          matInput
-                          name="description"
-                          id="description"
-                          rows="3"
-                          [formControlName]="field.key"
-                        ></textarea>
-                      </mat-form-field>
-                    </ng-container>
-                    <ng-container *ngIf="field.input === 'textarea'">
-                      <mat-form-field appearance="outline">
-                        <textarea
-                          matInput
-                          name="'field.id'"
-                          id="'field.id'"
-                          [formControlName]="field.key"
-                        ></textarea>
-                      </mat-form-field>
-                    </ng-container>
-                    <ng-container
-                      *ngIf="
-                        field.input === 'text' &&
-                        field.type !== 'title' &&
-                        field.type !== 'description'
-                      "
-                    >
-                      <mat-form-field appearance="outline">
-                        <input
-                          matInput
-                          name="'field.id'"
-                          id="'field.id'"
-                          [formControlName]="field.key"
-                      /></mat-form-field>
-                    </ng-container>
-                    <ng-container *ngIf="field.input === 'markdown'">
-                      <mat-form-field appearance="outline">
-                        <textarea
-                          matInput
-                          name="'field.id'"
-                          id="'field.id'"
-                          [formControlName]="field.key"
-                        ></textarea>
-                      </mat-form-field>
-                    </ng-container>
+        <form class="translate_post__edit" [formGroup]="translateForm">
+          <div class="translate_post__fields" *ngFor="let task of post.post_content">
+            <ng-container *ngFor="let field of task.fields">
+              <div class="form-row" *ngIf="isTranslateableContent(field)">
+                <mat-label
+                  >{{ field?.translations[activeLanguage.code]?.label || field?.label }}
+                </mat-label>
+                <div class="translate_post__original">
+                  <div><i>Text in original language:</i></div>
+                  <div>
+                    <p>{{ getOriginalValue(field) }}</p>
                   </div>
                 </div>
-              </ng-container>
-            </div>
-          </form>
-        </div>
+                <div class="translate_post__translation">
+                  <span class="field-label">Add your translation below:</span>
+                  <ng-container *ngIf="field.input === 'text' && field.type === 'title'">
+                    <span class="color-accent">*</span>
+                    <mat-form-field appearance="outline">
+                      <input matInput name="title" id="title" [formControlName]="field.key" />
+                    </mat-form-field>
+                  </ng-container>
+                  <ng-container *ngIf="field.input === 'text' && field.type === 'description'">
+                    <span class="color-accent">*</span>
+                    <mat-form-field appearance="outline">
+                      <textarea
+                        matInput
+                        name="description"
+                        id="description"
+                        rows="3"
+                        [formControlName]="field.key"
+                      ></textarea>
+                    </mat-form-field>
+                  </ng-container>
+                  <ng-container *ngIf="field.input === 'textarea'">
+                    <mat-form-field appearance="outline">
+                      <textarea
+                        matInput
+                        name="'field.id'"
+                        id="'field.id'"
+                        [formControlName]="field.key"
+                      ></textarea>
+                    </mat-form-field>
+                  </ng-container>
+                  <ng-container
+                    *ngIf="
+                      field.input === 'text' &&
+                      field.type !== 'title' &&
+                      field.type !== 'description'
+                    "
+                  >
+                    <mat-form-field appearance="outline">
+                      <input
+                        matInput
+                        name="'field.id'"
+                        id="'field.id'"
+                        [formControlName]="field.key"
+                    /></mat-form-field>
+                  </ng-container>
+                  <ng-container *ngIf="field.input === 'markdown'">
+                    <mat-form-field appearance="outline">
+                      <textarea
+                        matInput
+                        name="'field.id'"
+                        id="'field.id'"
+                        [formControlName]="field.key"
+                      ></textarea>
+                    </mat-form-field>
+                  </ng-container>
+                  <mat-error
+                    *ngIf="
+                      translateForm.get(field.key)?.invalid && translateForm.get(field.key)?.touched
+                    "
+                  >
+                    <p *ngIf="translateForm.get(field.key)?.hasError('required')">
+                      {{ 'post.modify.errors.required' | translate : { label: field.label } }}
+                    </p>
+                  </mat-error>
+                </div>
+              </div>
+            </ng-container>
+          </div>
+        </form>
       </div>
     </div>
 
@@ -154,7 +160,11 @@
       >
         {{ 'app.cancel' | translate }}
       </mzima-client-button>
-      <mzima-client-button (buttonClick)="saveTranslation()" [data-qa]="'btn-lang-add'">
+      <mzima-client-button
+        (buttonClick)="saveTranslation()"
+        [disabled]="translateForm.disabled || translateForm.invalid"
+        [data-qa]="'btn-lang-add'"
+      >
         {{ 'app.save' | translate }}
       </mzima-client-button>
     </div>
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
index 3c8f68e94f..95edb86ef4 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
@@ -1,5 +1,17 @@
 @import 'helpers';
 
+.select_language {
+  margin-bottom: 26px;
+  padding-bottom: 26px;
+  border-bottom: 1px solid var(--color-neutral-20);
+}
+
+.field-label {
+  margin: 4px 0 8px 0;
+  font-size: 14px;
+  font-weight: 700;
+}
+
 .types-list {
   padding: 0;
   display: flex;
@@ -33,13 +45,6 @@
   }
 }
 
-.flag {
-  width: 30px;
-  height: 20px;
-  object-fit: contain;
-  margin-inline-end: 5px;
-  object-position: 0 50%;
-}
 .translate_post {
   display: flex;
   flex-direction: row;
@@ -54,25 +59,27 @@
     gap: 24px;
     background: var(--Neutral-Neutral-10, #f5f5f5);
   }
+
   &__fields {
     display: flex;
     flex-direction: column;
     width: 100%;
     gap: 24px;
   }
+
   .field-label {
     font-weight: 500;
     line-height: 160%; /* 22.4px */
     letter-spacing: -0.07px;
   }
+
   &__original {
     padding: 24px;
     border: 1px solid var(--Neutral-Neutral-30, #e2e2e3);
     background-color: white;
     display: flex-row;
   }
-  &__translation {
-  }
+
   .mat-form-field {
     background: white;
   }
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index ee6e67995a..dee9274b42 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { FormGroup, FormControl } from '@angular/forms';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
 
 import { LanguageInterface, PostResult, PostsService } from '@mzima-client/sdk';
 import { EventBusService, EventType } from '@services';
@@ -121,7 +121,11 @@ export class PostTranslateComponent implements OnInit {
       .flatMap((task: any) => task.fields)
       .filter((field: any) => this.isTranslateableContent(field))
       .forEach((field: any) => {
-        newForm.addControl(field.key, new FormControl(''));
+        if (field.type === 'title' || field.type === 'description') {
+          newForm.addControl(field.key, new FormControl('', Validators.required));
+        } else {
+          newForm.addControl(field.key, new FormControl(''));
+        }
         const translation = this.getTranslationValue(field);
         if (translation) {
           newForm.get(field.key)?.setValue(translation);

From 42c54a4fc4d6de3423614e936c416c62ccd3893a Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Mon, 16 Dec 2024 20:03:40 +0100
Subject: [PATCH 19/28] CSS-cleanup for post-translations

---
 .../post-translate.component.html             | 162 ++++++++----------
 .../post-translate.component.scss             |  30 +---
 2 files changed, 81 insertions(+), 111 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index 76cac78d04..527f00441f 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -18,7 +18,7 @@
 
 <div mat-dialog-content>
   <ng-container *ngIf="!isTranslateMode; else translate">
-    <div class="select_language" *ngIf="enabledLanguages.length > 0">
+    <div class="select-language" *ngIf="enabledLanguages.length > 0">
       <p>Available translations (select to see post):</p>
       <mat-form-field appearance="outline" class="feed-page__control">
         <mat-select
@@ -34,8 +34,8 @@
         </mat-select>
       </mat-form-field>
     </div>
-    <div class="fields-list" *ngIf="post.allowed_privileges.includes('update')">
-      <h3 class="field-label">Select a language to translate to, or edit:</h3>
+    <div *ngIf="post.allowed_privileges.includes('update')">
+      <h3 class="list-label">Select a language to translate to, or edit:</h3>
       <ul role="list" class="types-list">
         <li mat-ripple role="listitem" class="type-item" *ngIf="defaultLanguage">
           <mzima-client-button
@@ -63,91 +63,81 @@ <h3 class="field-label">Select a language to translate to, or edit:</h3>
   </ng-container>
 
   <ng-template mat-dialog-content #translate>
-    <div class="form-row" *ngIf="post.allowed_privileges.includes('update')">
-      <div class="translate_post">
-        <form class="translate_post__edit" [formGroup]="translateForm">
-          <div class="translate_post__fields" *ngFor="let task of post.post_content">
-            <ng-container *ngFor="let field of task.fields">
-              <div class="form-row" *ngIf="isTranslateableContent(field)">
-                <mat-label
-                  >{{ field?.translations[activeLanguage.code]?.label || field?.label }}
-                </mat-label>
-                <div class="translate_post__original">
-                  <div><i>Text in original language:</i></div>
-                  <div>
-                    <p>{{ getOriginalValue(field) }}</p>
-                  </div>
-                </div>
-                <div class="translate_post__translation">
-                  <span class="field-label">Add your translation below:</span>
-                  <ng-container *ngIf="field.input === 'text' && field.type === 'title'">
-                    <span class="color-accent">*</span>
-                    <mat-form-field appearance="outline">
-                      <input matInput name="title" id="title" [formControlName]="field.key" />
-                    </mat-form-field>
-                  </ng-container>
-                  <ng-container *ngIf="field.input === 'text' && field.type === 'description'">
-                    <span class="color-accent">*</span>
-                    <mat-form-field appearance="outline">
-                      <textarea
-                        matInput
-                        name="description"
-                        id="description"
-                        rows="3"
-                        [formControlName]="field.key"
-                      ></textarea>
-                    </mat-form-field>
-                  </ng-container>
-                  <ng-container *ngIf="field.input === 'textarea'">
-                    <mat-form-field appearance="outline">
-                      <textarea
-                        matInput
-                        name="'field.id'"
-                        id="'field.id'"
-                        [formControlName]="field.key"
-                      ></textarea>
-                    </mat-form-field>
-                  </ng-container>
-                  <ng-container
-                    *ngIf="
-                      field.input === 'text' &&
-                      field.type !== 'title' &&
-                      field.type !== 'description'
-                    "
-                  >
-                    <mat-form-field appearance="outline">
-                      <input
-                        matInput
-                        name="'field.id'"
-                        id="'field.id'"
-                        [formControlName]="field.key"
-                    /></mat-form-field>
-                  </ng-container>
-                  <ng-container *ngIf="field.input === 'markdown'">
-                    <mat-form-field appearance="outline">
-                      <textarea
-                        matInput
-                        name="'field.id'"
-                        id="'field.id'"
-                        [formControlName]="field.key"
-                      ></textarea>
-                    </mat-form-field>
-                  </ng-container>
-                  <mat-error
-                    *ngIf="
-                      translateForm.get(field.key)?.invalid && translateForm.get(field.key)?.touched
-                    "
-                  >
-                    <p *ngIf="translateForm.get(field.key)?.hasError('required')">
-                      {{ 'post.modify.errors.required' | translate : { label: field.label } }}
-                    </p>
-                  </mat-error>
+    <div class="translate-post" *ngIf="post.allowed_privileges.includes('update')">
+      <form class="" [formGroup]="translateForm">
+        <div class="translate-post__fields" *ngFor="let task of post.post_content">
+          <ng-container *ngFor="let field of task.fields">
+            <div class="form-row" *ngIf="isTranslateableContent(field)">
+              <mat-label
+                >{{ field?.translations[activeLanguage.code]?.label || field?.label }}
+              </mat-label>
+              <div class="translate-post__original">
+                <div><i>Text in original language:</i></div>
+                <div>
+                  <p>{{ getOriginalValue(field) }}</p>
                 </div>
               </div>
-            </ng-container>
-          </div>
-        </form>
-      </div>
+              <span class="field-label">Add your translation below:</span>
+              <ng-container *ngIf="field.input === 'text' && field.type === 'title'">
+                <span class="color-accent">*</span>
+                <mat-form-field appearance="outline">
+                  <input matInput name="title" id="title" [formControlName]="field.key" />
+                </mat-form-field>
+              </ng-container>
+              <ng-container *ngIf="field.input === 'text' && field.type === 'description'">
+                <span class="color-accent">*</span>
+                <mat-form-field appearance="outline">
+                  <textarea
+                    matInput
+                    name="description"
+                    id="description"
+                    rows="3"
+                    [formControlName]="field.key"
+                  ></textarea>
+                </mat-form-field>
+              </ng-container>
+              <ng-container *ngIf="field.input === 'textarea'">
+                <mat-form-field appearance="outline">
+                  <textarea
+                    matInput
+                    name="'field.id'"
+                    id="'field.id'"
+                    [formControlName]="field.key"
+                  ></textarea>
+                </mat-form-field>
+              </ng-container>
+              <ng-container
+                *ngIf="
+                  field.input === 'text' && field.type !== 'title' && field.type !== 'description'
+                "
+              >
+                <mat-form-field appearance="outline">
+                  <input matInput name="'field.id'" id="'field.id'" [formControlName]="field.key"
+                /></mat-form-field>
+              </ng-container>
+              <ng-container *ngIf="field.input === 'markdown'">
+                <mat-form-field appearance="outline">
+                  <textarea
+                    matInput
+                    name="'field.id'"
+                    id="'field.id'"
+                    [formControlName]="field.key"
+                  ></textarea>
+                </mat-form-field>
+              </ng-container>
+              <mat-error
+                *ngIf="
+                  translateForm.get(field.key)?.invalid && translateForm.get(field.key)?.touched
+                "
+              >
+                <p *ngIf="translateForm.get(field.key)?.hasError('required')">
+                  {{ 'post.modify.errors.required' | translate : { label: field.label } }}
+                </p>
+              </mat-error>
+            </div>
+          </ng-container>
+        </div>
+      </form>
     </div>
 
     <div mat-dialog-actions align="end">
diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
index 95edb86ef4..e75ea52ec7 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
@@ -1,39 +1,31 @@
 @import 'helpers';
 
-.select_language {
+.select-language {
   margin-bottom: 26px;
   padding-bottom: 26px;
   border-bottom: 1px solid var(--color-neutral-20);
 }
 
-.field-label {
+.list-label {
   margin: 4px 0 8px 0;
   font-size: 14px;
   font-weight: 700;
 }
 
 .types-list {
-  padding: 0;
   display: flex;
   margin: 0 -8px;
   flex-wrap: wrap;
-  list-style: none;
-  justify-content: flex-start;
 }
 
 .type-item {
   display: flex;
-  cursor: pointer;
-  min-height: 46px;
   padding: 8px 12px;
   margin: 0 4px 8px;
-  position: relative;
   border-radius: 4px;
-  align-items: center;
   width: calc(50% - 8px);
   transition: color 0.35s ease;
   background: var(--color-neutral-10);
-  border-inline-start: 5px solid var(--color, transparent);
 
   @include breakpoint-max($tablet) {
     border-inline-start-width: 4px;
@@ -45,28 +37,17 @@
   }
 }
 
-.translate_post {
-  display: flex;
-  flex-direction: row;
-  gap: 16px;
-  &__edit {
+.translate-post {
+  &__fields {
     display: flex;
+    flex-direction: column;
     width: 100%;
     padding: 24px 16px;
     border-radius: 4px;
-    flex-direction: column;
-    align-items: flex-start;
     gap: 24px;
     background: var(--Neutral-Neutral-10, #f5f5f5);
   }
 
-  &__fields {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    gap: 24px;
-  }
-
   .field-label {
     font-weight: 500;
     line-height: 160%; /* 22.4px */
@@ -77,7 +58,6 @@
     padding: 24px;
     border: 1px solid var(--Neutral-Neutral-30, #e2e2e3);
     background-color: white;
-    display: flex-row;
   }
 
   .mat-form-field {

From 6fc87860b5e6b367dd7ee97ea63ae07b35d15b58 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Mon, 16 Dec 2024 20:19:19 +0100
Subject: [PATCH 20/28] Moving strings to en.json

---
 .../post-translate.component.html             | 20 ++++++++++++-------
 .../src/assets/locales/en.json                |  7 ++++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
index 527f00441f..329c7fbd5e 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.html
@@ -12,14 +12,18 @@
   <mat-icon icon svgIcon="close"></mat-icon>
 </mzima-client-button>
 
-<strong mat-dialog-title [data-qa]="'lang-modal-title'"
-  >{{ isTranslateMode ? 'Translate post to ' + activeLanguage.name : 'Translate post' }}
+<strong *ngIf="!isTranslateMode" mat-dialog-title [data-qa]="'lang-modal-title'"
+  >{{ 'translations.translate_post' | translate }}
+</strong>
+
+<strong *ngIf="isTranslateMode" mat-dialog-title [data-qa]="'lang-modal-title'"
+  >{{ 'translations.translate_post_to' | translate : { language: activeLanguage.name } }}
 </strong>
 
 <div mat-dialog-content>
   <ng-container *ngIf="!isTranslateMode; else translate">
     <div class="select-language" *ngIf="enabledLanguages.length > 0">
-      <p>Available translations (select to see post):</p>
+      <p>{{ 'translations.available_languages' | translate }}</p>
       <mat-form-field appearance="outline" class="feed-page__control">
         <mat-select
           name="language"
@@ -35,7 +39,7 @@
       </mat-form-field>
     </div>
     <div *ngIf="post.allowed_privileges.includes('update')">
-      <h3 class="list-label">Select a language to translate to, or edit:</h3>
+      <h3 class="list-label">{{ 'translations.select_translate_edit' | translate }}</h3>
       <ul role="list" class="types-list">
         <li mat-ripple role="listitem" class="type-item" *ngIf="defaultLanguage">
           <mzima-client-button
@@ -44,7 +48,7 @@ <h3 class="list-label">Select a language to translate to, or edit:</h3>
             class="type-item__checkbox"
             [disabled]="true"
           >
-            {{ defaultLanguage.name }} (Default language)
+            {{ defaultLanguage.name }} ({{ 'translations.default_language' | translate }})
           </mzima-client-button>
         </li>
         <li mat-ripple role="listitem" class="type-item" *ngFor="let language of languages">
@@ -72,12 +76,14 @@ <h3 class="list-label">Select a language to translate to, or edit:</h3>
                 >{{ field?.translations[activeLanguage.code]?.label || field?.label }}
               </mat-label>
               <div class="translate-post__original">
-                <div><i>Text in original language:</i></div>
+                <div>
+                  <i>{{ 'translations.text_in_original' | translate }}</i>
+                </div>
                 <div>
                   <p>{{ getOriginalValue(field) }}</p>
                 </div>
               </div>
-              <span class="field-label">Add your translation below:</span>
+              <span class="field-label">{{ 'translations.add_translation' | translate }}</span>
               <ng-container *ngIf="field.input === 'text' && field.type === 'title'">
                 <span class="color-accent">*</span>
                 <mat-form-field appearance="outline">
diff --git a/apps/web-mzima-client/src/assets/locales/en.json b/apps/web-mzima-client/src/assets/locales/en.json
index 78873aa0b4..a3424e83e7 100644
--- a/apps/web-mzima-client/src/assets/locales/en.json
+++ b/apps/web-mzima-client/src/assets/locales/en.json
@@ -2162,15 +2162,19 @@
     "i_agree": "I agree to Ushahidi's <a href=\"https://www.ushahidi.com/privacy-policy\" target=\"_blank\">Privacy Policy</a> and\n<a href=\"https://www.ushahidi.com/terms-of-service\" target=\"_blank\">Terms and Conditions</a>."
   },
   "translations": {
+    "available_languages": "Available translations (select to see post):",
+    "translate_post": "Translate post",
+    "translate_post_to": "Translate post to {{language}}",
     "languages": "Languages",
     "language": "Language",
     "default": "default",
+    "default_language": "Default language",
+    "text_in_original": "Text in original language:",
     "translation_default": "(default)",
     "translate_field": "Translate field",
     "survey_select_default": "Select default language for this survey",
     "category_select_default": "Select default language for this category",
     "error_translation_exists": "You cannot select this language since there is already a translation for it.",
-    "edit_default_text": "Text in default language",
     "edit_placeholder": "Write your translation here",
     "add_translation": "Add your translation below:",
     "survey_name_required": "Translation for survey-name is required",
@@ -2184,6 +2188,7 @@
     "add_a_language": "Add a language",
     "error_no_default": "You need to specify a default language before adding a new translation.",
     "select_language": "Select a language to add translation for",
+    "select_translate_edit": "Select a language to translate to, or edit:",
     "default_lang_info": "This is the language that will be used if no translations are available for the language the user has set for the deployment."
   },
   "languages": {

From 928c32944643c37bf3628e784f84d5113f903f2b Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Mon, 16 Dec 2024 20:23:11 +0100
Subject: [PATCH 21/28] Removing console.log

---
 .../src/app/post/post-edit/post-edit.component.ts                | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
index f05e2740e9..5809b2ed05 100644
--- a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
@@ -765,7 +765,6 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
   }
 
   private updatePost(postId: number, postData: any) {
-    console.log(postData);
     this.postsService.update(postId, postData).subscribe({
       next: ({ result }) => {
         this.postsService.unlockPost(postId).subscribe();

From f1d50b9fb1e09ab118bec5889bb1384d902cd661 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 18 Dec 2024 10:50:15 +0100
Subject: [PATCH 22/28] Using site-language if no base_language is set

---
 .../src/app/post/post-edit/post-edit.component.ts             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
index 5809b2ed05..ee5643dc06 100644
--- a/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-edit/post-edit.component.ts
@@ -736,8 +736,8 @@ export class PostEditComponent extends BaseComponent implements OnInit, OnChange
       this.showMessage(error, 'error');
       return;
     }
-    // should be site-language
-    const postLanguage = this.selectedLanguage?.code || 'en';
+
+    const postLanguage = this.selectedLanguage?.code || this.languageService.initialLanguage;
     const postData = {
       base_language: postLanguage,
       completed_stages: this.completeStages,

From 5f2f268a1990e89f8e87437bc1f98087222de84e Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 18 Dec 2024 10:50:57 +0100
Subject: [PATCH 23/28] Hiding translations-icon everywhere except in details

---
 .../src/app/post/post-head/post-head.component.ts              | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
index c18f46c7c4..98c9dbea2e 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
@@ -169,7 +169,6 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
   }
   public showTranslationsIcon() {
     const languagesAvailabe = this.post?.enabled_languages?.available;
-    const hideIcon = this.hideTranslationsIcon && this.feedView;
-    return !hideIcon && (languagesAvailabe || this.editable);
+    return !this.hideTranslationsIcon && (languagesAvailabe || this.editable);
   }
 }

From 7333f3fa91f913ec9c568f4fa3ae235ef772bacb Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 18 Dec 2024 10:52:52 +0100
Subject: [PATCH 24/28] Adding strings to en.json

---
 .../post-translated.component.html                | 15 ++++++++++-----
 apps/web-mzima-client/src/assets/locales/en.json  |  6 +++++-
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
index a0e777c71c..303d1ae40f 100644
--- a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.html
@@ -4,11 +4,13 @@
       <mat-icon class="icon" icon svgIcon="translate"></mat-icon>
     </div>
     <div>
-      <h3>Translated from {{ getLanguageName(baseLanguage) }}</h3>
+      <h3>
+        {{
+          'translations.translated_to' | translate : { language: getLanguageName(displayLanguage) }
+        }}
+      </h3>
       <p>
-        This post was translated from {{ getLanguageName(baseLanguage) }} to your selected language
-        {{ getLanguageName(displayLanguage) }}.
-        <a (click)="openTranslations()" class="link-blue">Change language</a>
+        {{ 'translations.viewing_translated' | translate }}
       </p>
       <mzima-client-button
         class="original-post"
@@ -20,8 +22,11 @@ <h3>Translated from {{ getLanguageName(baseLanguage) }}</h3>
         iconPosition="first"
       >
         <mat-icon iconPrefix svgIcon="eye-open"></mat-icon>
-        See original
+        {{ 'translations.view_original' | translate }}
       </mzima-client-button>
+      <a (click)="openTranslations()" class="link-blue">{{
+        'translations.change_lang' | translate
+      }}</a>
     </div>
   </div>
 </ng-container>
diff --git a/apps/web-mzima-client/src/assets/locales/en.json b/apps/web-mzima-client/src/assets/locales/en.json
index a3424e83e7..071cc81787 100644
--- a/apps/web-mzima-client/src/assets/locales/en.json
+++ b/apps/web-mzima-client/src/assets/locales/en.json
@@ -2189,7 +2189,11 @@
     "error_no_default": "You need to specify a default language before adding a new translation.",
     "select_language": "Select a language to add translation for",
     "select_translate_edit": "Select a language to translate to, or edit:",
-    "default_lang_info": "This is the language that will be used if no translations are available for the language the user has set for the deployment."
+    "default_lang_info": "This is the language that will be used if no translations are available for the language the user has set for the deployment.",
+    "translated_to": "Translated to {{language}}",
+    "viewing_translated":"You are viewing a translated version of this post.",
+    "view_original":"View original post",
+    "change_lang": "Change language"
   },
   "languages": {
     "ach": "Acoli",

From 495122bfae61d30d6cf3d242dec5c8ea29fa5ee7 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 18 Dec 2024 10:54:49 +0100
Subject: [PATCH 25/28] Displaying translation-info in post-modal

---
 .../src/app/post/post-translate/post-translate.component.ts    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
index dee9274b42..9870dfbdda 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.ts
@@ -1,6 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
-
 import { LanguageInterface, PostResult, PostsService } from '@mzima-client/sdk';
 import { EventBusService, EventType } from '@services';
 import { UntilDestroy } from '@ngneat/until-destroy';
@@ -54,7 +53,7 @@ export class PostTranslateComponent implements OnInit {
       type: EventType.DisplayTranslatedPost,
       payload: event.value,
     });
-    this.closeModal();
+    this.closeModal({ displayLanguage: event.value, post: this.post });
   }
   saveTranslation() {
     this.translateForm.disable();

From 98f50da047fd0d59d469ce2b2cb8b351df8e64a0 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 18 Dec 2024 10:55:13 +0100
Subject: [PATCH 26/28] Using full language-list for translations

---
 .../src/app/post/post-translated/post-translated.component.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts
index 0b65edde87..37818ed46f 100644
--- a/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-translated/post-translated.component.ts
@@ -14,7 +14,9 @@ export class PostTranslatedComponent {
   constructor(private languageService: LanguageService) {}
 
   public getLanguageName(code: string) {
-    return this.languageService.getLanguages().find((lang) => lang.code === code)?.name || code;
+    return (
+      this.languageService.getEntityLanguages().find((lang) => lang.code === code)?.name || code
+    );
   }
 
   originalPost() {

From 0eb4f9fe325be813e918f35a82a9fd4a7925455a Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 18 Dec 2024 13:47:15 +0100
Subject: [PATCH 27/28] Only displaying icon if translations are available (for
 non-edit-users)

---
 .../src/app/post/post-head/post-head.component.ts               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
index 98c9dbea2e..c630626898 100644
--- a/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
+++ b/apps/web-mzima-client/src/app/post/post-head/post-head.component.ts
@@ -168,7 +168,7 @@ export class PostHeadComponent extends BaseComponent implements OnInit {
     });
   }
   public showTranslationsIcon() {
-    const languagesAvailabe = this.post?.enabled_languages?.available;
+    const languagesAvailabe = this.post?.enabled_languages?.available?.length > 0;
     return !this.hideTranslationsIcon && (languagesAvailabe || this.editable);
   }
 }

From e9a5bf6975656abc002bb9e39a3242fe6bf107b9 Mon Sep 17 00:00:00 2001
From: Anna Iosif <anna@ushahidi.com>
Date: Wed, 18 Dec 2024 16:35:37 +0100
Subject: [PATCH 28/28] Remove line under dropdown but keep spacing

---
 .../src/app/post/post-translate/post-translate.component.scss | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
index e75ea52ec7..315b343d62 100644
--- a/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
+++ b/apps/web-mzima-client/src/app/post/post-translate/post-translate.component.scss
@@ -1,11 +1,7 @@
 @import 'helpers';
-
 .select-language {
   margin-bottom: 26px;
-  padding-bottom: 26px;
-  border-bottom: 1px solid var(--color-neutral-20);
 }
-
 .list-label {
   margin: 4px 0 8px 0;
   font-size: 14px;