@hmcts/ccd-case-ui-toolkit 7.3.46 → 7.3.47

package/fesm2022/hmcts-ccd-case-ui-toolkit.mjs

@@ -6624,6 +6624,7 @@ class LabelSubstitutorDirective {
     contextFields = [];
     formGroup;
     elementsToSubstitute = ['label', 'hint_text'];
+    initialLabel;
     initialHintText;
     languageSubscription;
     constructor(fieldsUtils, placeholderService, rpxTranslationPipe, rpxTranslationService) {
@@ -6633,9 +6634,10 @@ class LabelSubstitutorDirective {
         this.rpxTranslationService = rpxTranslationService;
     }
     ngOnInit() {
+        this.initialLabel = this.caseField.label;
         this.initialHintText = this.caseField.hint_text;
-        this.caseField.originalLabel = this.caseField.label;
         this.noCacheProcessing();
+        this.caseField.originalLabel = this.caseField.originalLabel || this.caseField.label;
         this.formGroup = this.formGroup || new FormGroup({});
         this.languageSubscription = this.rpxTranslationService.language$.pipe(skip(1)).subscribe(() => {
             this.onLanguageChange();
@@ -6658,23 +6660,10 @@ class LabelSubstitutorDirective {
             }
         }
     }
-    applySubstitutions() {
+    applySubstitutions(isLanguageChange = false) {
         const fields = this.getReadOnlyAndFormFields();
         if (this.shouldSubstitute('label')) {
-            const oldLabel = this.caseField.label;
-            const substitutedLabel = this.resolvePlaceholders(fields, this.caseField.label);
-            if (oldLabel && oldLabel !== substitutedLabel) {
-                // we need to translate the uninterpolated data then substitute the values in translated string
-                this.caseField.originalLabel = substitutedLabel;
-                const translated = this.rpxTranslationPipe.transform(oldLabel);
-                const transSubstitutedLabel = this.resolvePlaceholders(fields, translated);
-                this.caseField.label = transSubstitutedLabel;
-                this.caseField.isTranslated = this.rpxTranslationService.language === 'cy' && translated !== oldLabel;
-            }
-            else {
-                this.caseField.label = substitutedLabel;
-                this.caseField.isTranslated = false;
-            }
+            this.applyLabelSubstitution(fields, isLanguageChange);
         }
         if (this.shouldSubstitute('hint_text')) {
             this.caseField.hint_text = this.resolvePlaceholders(fields, this.caseField.hint_text);
@@ -6683,14 +6672,83 @@ class LabelSubstitutorDirective {
             this.caseField.value = this.resolvePlaceholders(fields, this.caseField.value);
         }
     }
+    applyLabelSubstitution(fields, isLanguageChange) {
+        const currentLabel = this.caseField.label;
+        // `originalLabel` stores the label exactly as it came from the server, before any
+        // placeholder values were inserted. That gives us a clean starting point when the user
+        // changes language or returns to the page later.
+        const originalLabel = this.caseField.originalLabel || currentLabel;
+        const substitutedCurrentLabel = this.resolvePlaceholders(fields, currentLabel);
+        const substitutedOriginalLabel = originalLabel === currentLabel
+            ? substitutedCurrentLabel
+            : this.resolvePlaceholders(fields, originalLabel);
+        const substitutedLabel = substitutedCurrentLabel || substitutedOriginalLabel;
+        const hasAnyLabelSubstitution = (currentLabel && currentLabel !== substitutedCurrentLabel)
+            || (originalLabel && originalLabel !== substitutedOriginalLabel);
+        if (!hasAnyLabelSubstitution) {
+            // No placeholders were resolved, so keep the current label and allow the render layer
+            // to translate it normally if needed.
+            this.setLabelState(substitutedLabel);
+            return;
+        }
+        // Preserve the original template the first time we successfully interpolate it.
+        this.caseField.originalLabel = this.caseField.originalLabel || originalLabel;
+        this.applyTranslatedLabelState(fields, originalLabel, substitutedLabel, isLanguageChange);
+    }
+    applyTranslatedLabelState(fields, originalLabel, substitutedLabel, isLanguageChange) {
+        // Some labels only translate correctly if we translate the template first and then
+        // substitute the helper values into the translated sentence.
+        const translatedTemplateLabel = this.resolvePlaceholders(fields, isLanguageChange ? this.translateLabelOnLanguageChange(originalLabel) : this.translateLabel(originalLabel));
+        // Other labels only translate correctly if we first resolve the English phrase and let
+        // the render layer translate that final resolved string.
+        const translatedResolvedLabel = isLanguageChange
+            ? this.translateLabelOnLanguageChange(substitutedLabel)
+            : this.translateLabel(substitutedLabel);
+        const languageIsWelsh = this.rpxTranslationService.language === 'cy';
+        const hasResolvedWelshTranslation = languageIsWelsh
+            && translatedResolvedLabel
+            && translatedResolvedLabel !== substitutedLabel;
+        const hasTemplateWelshTranslation = languageIsWelsh
+            && translatedTemplateLabel
+            && translatedTemplateLabel !== substitutedLabel;
+        if (hasResolvedWelshTranslation) {
+            // Keep the resolved English label and mark it as not yet translated so the field
+            // template can run `rpxTranslate` on the full phrase at render time.
+            this.setLabelState(substitutedLabel);
+            return;
+        }
+        if (hasTemplateWelshTranslation) {
+            // Use the template-translated result when translating the fully resolved label does
+            // not improve the Welsh output.
+            this.setLabelState(translatedTemplateLabel, true);
+            return;
+        }
+        // English, untranslated Welsh, or labels whose translation is handled elsewhere.
+        this.setLabelState(substitutedLabel);
+    }
+    translateLabel(label) {
+        return this.rpxTranslationPipe.transform(label);
+    }
+    translateLabelOnLanguageChange(label) {
+        return this.rpxTranslationService.language === 'en'
+            ? label
+            : this.translateLabel(label);
+    }
+    setLabelState(label, isTranslated = false) {
+        this.caseField.label = label;
+        this.caseField.isTranslated = isTranslated;
+    }
     onLanguageChange() {
-        this.resetToInitialValues();
-        this.applySubstitutions();
+        this.resetToInitialValues(true);
+        this.applySubstitutions(true);
     }
-    resetToInitialValues() {
-        if (this.caseField?.originalLabel) {
+    resetToInitialValues(isLanguageChange = false) {
+        if (isLanguageChange && this.caseField?.originalLabel) {
             this.caseField.label = this.caseField.originalLabel;
         }
+        if (!isLanguageChange && this.initialLabel) {
+            this.caseField.label = this.initialLabel;
+        }
         if (this.initialHintText) {
             this.caseField.hint_text = this.initialHintText;
         }