From ea7b9e7154858960af29fc427ee2f64e2a96d425 Mon Sep 17 00:00:00 2001
From: Didier Toussaint <didier.toussaint.trad@gmail.com>
Date: Mon, 17 Jun 2024 13:47:35 +0200
Subject: [PATCH] fix(cli): update translationIO service in CLI package (to
 handle context) (#1949)

* Handle context when syncing with Translation.io

* Update logo + fix image link on Translation.io in docs/tools

* Fix syntax (I had not run prettier)
---
 packages/cli/src/services/translationIO.ts | 57 ++++++++++++++++++++--
 website/docs/tools/translation-io.md       |  7 +--
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/packages/cli/src/services/translationIO.ts b/packages/cli/src/services/translationIO.ts
index d2959d5d4..27e0ed7e2 100644
--- a/packages/cli/src/services/translationIO.ts
+++ b/packages/cli/src/services/translationIO.ts
@@ -23,6 +23,9 @@ type TranslationIoProject = {
   url: string
 }
 
+const EXPLICIT_ID_FLAG = "js-lingui-explicit-id"
+const EXPLICIT_ID_AND_CONTEXT_FLAG = "js-lingui-explicit-id-and-context"
+
 const getCreateHeaders = (language: string) => ({
   "POT-Creation-Date": formatDate(new Date(), "yyyy-MM-dd HH:mmxxxx"),
   "MIME-Version": "1.0",
@@ -216,39 +219,83 @@ function sync(
 }
 
 function createSegmentFromPoItem(item: POItem) {
-  const itemHasId = item.msgid != item.msgstr[0] && item.msgstr[0].length
+  const itemHasExplicitId = item.extractedComments.includes(EXPLICIT_ID_FLAG)
+  const itemHasContext = item.msgctxt != null
 
   const segment: TranslationIoSegment = {
     type: "source", // No way to edit text for source language (inside code), so not using "key" here
-    source: itemHasId ? item.msgstr[0] : item.msgid, // msgstr may be empty if --overwrite is used and no ID is used
+    source: "",
     context: "",
     references: [],
     comment: "",
   }
 
-  if (itemHasId) {
+  // For segment.source & segment.context, we must remain compatible with projects created/synced before Lingui V4
+  if (itemHasExplicitId) {
+    segment.source = item.msgstr[0]
     segment.context = item.msgid
+  } else {
+    segment.source = item.msgid
+
+    if (itemHasContext) {
+      segment.context = item.msgctxt
+    }
   }
 
   if (item.references.length) {
     segment.references = item.references
   }
 
+  // Since Lingui v4, when using explicit IDs, Lingui automatically adds 'js-lingui-explicit-id' to the extractedComments array
   if (item.extractedComments.length) {
     segment.comment = item.extractedComments.join(" | ")
+
+    if (itemHasExplicitId && itemHasContext) {
+      // segment.context is already used for the explicit ID, so we need to pass the context (for translators) in segment.comment
+      segment.comment = `${item.msgctxt} | ${segment.comment}`
+
+      // Replace the flag to let us know how to recompose a target PO Item that is consistent with the source PO Item
+      segment.comment = segment.comment.replace(
+        EXPLICIT_ID_FLAG,
+        EXPLICIT_ID_AND_CONTEXT_FLAG
+      )
+    }
   }
 
   return segment
 }
 
 function createPoItemFromSegment(segment: TranslationIoSegment) {
+  const segmentHasExplicitId = segment.comment?.includes(EXPLICIT_ID_FLAG)
+  const segmentHasExplicitIdAndContext = segment.comment?.includes(
+    EXPLICIT_ID_AND_CONTEXT_FLAG
+  )
+
   const item = new PO.Item()
 
-  item.msgid = segment.context ? segment.context : segment.source
+  if (segmentHasExplicitId || segmentHasExplicitIdAndContext) {
+    item.msgid = segment.context
+  } else {
+    item.msgid = segment.source
+    item.msgctxt = segment.context
+  }
+
   item.msgstr = [segment.target]
   item.references =
     segment.references && segment.references.length ? segment.references : []
-  item.extractedComments = segment.comment ? segment.comment.split(" | ") : []
+
+  if (segment.comment) {
+    segment.comment = segment.comment.replace(
+      EXPLICIT_ID_AND_CONTEXT_FLAG,
+      EXPLICIT_ID_FLAG
+    )
+    item.extractedComments = segment.comment ? segment.comment.split(" | ") : []
+
+    // We recompose a target PO Item that is consistent with the source PO Item
+    if (segmentHasExplicitIdAndContext) {
+      item.msgctxt = item.extractedComments.shift()
+    }
+  }
 
   return item
 }
diff --git a/website/docs/tools/translation-io.md b/website/docs/tools/translation-io.md
index 7dd9dd109..b55819563 100644
--- a/website/docs/tools/translation-io.md
+++ b/website/docs/tools/translation-io.md
@@ -1,7 +1,8 @@
 # Translation.io
 
-<img src="https://translation.io/assets/logo-for-fb-73866392ffcfc181d7d3d6c1b61fa03dbf60c842cbe82d0f58b38af4597614df.png" alt="Translation.io Lingui Logo" width="300"/>
-<br />
+<p align="center">
+  <img src="https://translation.io/logo.png" alt="Translation.io - Localization made simple for tech companies" width="300" />
+</p>
 
 [Translation.io](https://translation.io/lingui) is a professional synchronization and collaboration platform that will assist your team in the translation of your Lingui application.
 
@@ -42,7 +43,7 @@ Sometimes you have no choice but to confront your translators with HTML or inter
 
 `Hello {name}` should never be translated as `Bonjour {nom}`, and we have several mechanisms to ensure that, like warnings and auto-completion:
 
-![Syntax Highlighting warning on Translation.io](https://translation.io/_articles/2019-10-11-highlighting-of-html-tags-and-interpolated-variables/highlight-interpolated-variable-lingui.png)
+![Syntax Highlighting warning on Translation.io](https://translation.io/_articles/translation/2019-10-11-highlighting-of-html-tags-and-interpolated-variables/highlight-interpolated-variable-lingui.png)
 
 ---