@testgorilla/tgo-ui 2.30.13 → 2.31.1

package/projects/tgo-canopy-ui/models/colors.model.ts

@@ -0,0 +1,88 @@
+export enum Color {
+  // Teal colors
+  TGO_TEAL_60B = '#1C443C',
+  TGO_TEAL_30B = '#31766A',
+  TGO_TEAL_DEFAULT = '#46A997',
+  TGO_TEAL_30W = '#7EC3B6',
+  TGO_TEAL_60W = '#B5DDD5',
+  TGO_TEAL_SECONDARY = '#CBD6CB',
+  TGO_TEAL_90W = '#ECF6F5',
+
+  // Petrol colors
+  TGO_PETROL_60B = '#102930',
+  TGO_PETROL_30B = '#1B4754',
+  TGO_PETROL_DEFAULT = '#276678',
+  TGO_PETROL_30W = '#6894A0',
+  TGO_PETROL_60W = '#A9C2C9',
+  TGO_PETROL_SECONDARY = '#C8D7DE',
+  TGO_PETROL_90W = '#E9F0F1',
+
+  // Error colors
+  TGO_ERROR_60B = '#513131',
+  TGO_ERROR_30B = '#8E5655',
+  TGO_ERROR_60W = '#E3C3C6',
+  TGO_ERROR_SECONDARY = '#F0DAD9',
+  TGO_ERROR_DEFAULT = '#CB7B7A',
+
+  // Warning colors
+  TGO_WARNING_SECONDARY = '#F0D6BB',
+  TGO_WARNING_DEFAULT = '#CCA45F',
+
+  // Black colors - grayscale
+  TGO_BLACK = '#000000',
+  TGO_DARK = '#888888',
+  TGO_MEDIUM = '#E0E0E0',
+  TGO_GREY = '#EDEDED',
+  TGO_LIGHT = '#F6F6F6',
+  TGO_WHITE = '#FFFFFF',
+
+  // Brand colors
+  BRAND_60 = '#A90686',
+  BRAND_50 = '#D410AA',
+  BRAND_40 = '#FF54DA',
+  BRAND_30 = '#FFB3EE',
+  BRAND_20 = '#FFE6FA',
+  BRAND_10 = '#FFF2FC',
+
+  // Grayscale colors
+  GRAYSCALE_50 = '#666666',
+  GRAYSCALE_40 = '#919191',
+  GRAYSCALE_30 = '#D3D3D3',
+  GRAYSCALE_20 = '#E9E9E9',
+  GRAYSCALE_10 = '#F4F4F4',
+
+  // Additional colors
+  BLACK = '#242424',
+
+  // Accent colors
+  ACCENT_20 = '#FFF5ED',
+  ACCENT_10 = '#FFFAF6',
+
+  // Informative colors
+  INFORMATIVE_50 = '#1A47AA',
+  INFORMATIVE_40 = '#0165FC',
+  INFORMATIVE_30 = '#277CFD',
+  INFORMATIVE_20 = '#99C1FE',
+  INFORMATIVE_10 = '#D9E8FF',
+
+  // Success colors
+  SUCCESS_50 = '#3C9A13',
+  SUCCESS_40 = '#56C71A',
+  SUCCESS_30 = '#80D63E',
+  SUCCESS_20 = '#AAE47A',
+  SUCCESS_10 = '#D4F2C3',
+
+  // Error additional colors
+  ERROR_50 = '#E02800',
+  ERROR_40 = '#FF3003',
+  ERROR_30 = '#FF6E4F',
+  ERROR_20 = '#FFAC9A',
+  ERROR_10 = '#FFEAE6',
+
+  // Warning additional colors
+  WARNING_50 = '#D07D00',
+  WARNING_40 = '#FF9A03',
+  WARNING_30 = '#FFC268',
+  WARNING_20 = '#FFE1B3',
+  WARNING_10 = '#FFF5E6',
+}

package/projects/tgo-canopy-ui/models/keyboard-events.model.ts

@@ -0,0 +1,11 @@
+export enum IKeyboardEvent {
+  ENTER = 'Enter',
+  SPACE = ' ',
+  ARROW_DOWN = 'ArrowDown',
+  ARROW_UP = 'ArrowUp',
+  ESCAPE = 'Escape',
+  HOME = 'Home',
+  END = 'End',
+  PAGE_UP = 'PageUp',
+  PAGE_DOWN = 'PageDown',
+}

package/projects/tgo-canopy-ui/models/screen-breakpoints.model.ts

@@ -0,0 +1,4 @@
+export enum ScreenBreakpoints {
+  MOBILE = 600,
+  TABLET = 1023,
+}

package/projects/tgo-canopy-ui/models/universal-skills-report.model.ts

@@ -0,0 +1,53 @@
+import { SpiderChartData } from '../components/spider-chart/spider-chart.model';
+
+export interface SkillAreaGroup {
+  title: string;
+  description: string;
+  skillAreaList: SkillAreaData[];
+}
+
+export interface SkillAreaSpiderChartData {
+  title: string;
+  description: string;
+  spiderChartData: SpiderChartData;
+}
+
+export interface SkillAreaData {
+  percentileScoring: number;
+  poolPercentileScoring?: number;
+  skillAreaName: SkillAreaTypes;
+}
+
+//TODO Update this model after backend/endpoint definitions
+export enum SkillAreaGroupTypes {
+  FocusingOnObjectives = 1,
+  WorkingWithPeople = 2,
+  ManagingOnesSelf = 3,
+}
+
+//TODO Update this model after backend/endpoint definitions
+export enum SkillAreaTypes {
+  BusinessSavvy = 'BUSINESS_SAVVY',
+  StrategicPerspective = 'STRATEGIC_PERSPECTIVE',
+  CustomerFocus = 'CUSTOMER_FOCUS',
+  NavigatingComplexity = 'NAVIGATING_COMPLEXITY',
+  AgileDecisionMaking = 'AGILE_DECISION_MAKING',
+  EmbracingInnovation = 'EMBRACING_INNOVATION',
+  PlanningAndPrioritizing = 'PLANNING_AND_PRIORITIZING',
+  OrganizingResources = 'ORGANIZING_RESOURCES',
+  DrivingResults = 'DRIVING_RESULTS',
+
+  WorkingCollaboratively = 'WORKING_COLLABORATIVELY',
+  SocialAgility = 'SOCIAL_AGILITY',
+  CommunicatingEffectively = 'COMMUNICATING_EFFECTIVELY',
+  HandlingConflict = 'HANDLING_CONFLICT',
+  ValuingDiversity = 'VALUING_DIVERSITY',
+  DevelopingOthers = 'DEVELOPING_OTHERS',
+
+  ShowingResilience = 'SHOWING_RESILIENCE',
+  NavigatingAmbiguity = 'NAVIGATING_AMBIGUITY',
+  SelfAwareness = 'SELF_AWARENESS',
+  SelfDevelopment = 'SELF_DEVELOPMENT',
+  BeingBold = 'BEING_BOLD',
+  EarningTrust = 'EARNING_TRUST',
+}

package/projects/tgo-canopy-ui/pipes/data-property-getter.spec.ts

@@ -0,0 +1,63 @@
+import { DataPropertyGetterPipe } from "./data-property-getter";
+
+describe('DataPropertyGetterPipe', () => {
+  let pipe: DataPropertyGetterPipe;
+
+  beforeEach(() => {
+    pipe = new DataPropertyGetterPipe();
+  });
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return the value of the specified property', () => {
+    const obj = { a: { b: { c: 'value' } } };
+    const result = pipe.transform(obj, 'a.b.c');
+    expect(result).toBe('value');
+  });
+
+  it('should return an empty string if the property path is invalid', () => {
+    const obj = { a: { b: { c: 'value' } } };
+    const result = pipe.transform(obj, 'a.b.x');
+    expect(result).toBe('');
+  });
+
+  it('should return an empty string if the object is null or undefined', () => {
+    expect(pipe.transform({}, 'a.b.c')).toBe('');
+    expect(pipe.transform({ }, 'a.b.c')).toBe('');
+  });
+
+  it('should return the value of the property even if the path contains array indices', () => {
+    const obj = { a: [{ b: { c: 'value' } }] };
+    const result = pipe.transform(obj, 'a[0].b.c');
+    expect(result).toBe('value');
+  });
+
+  it('should return the correct value if the key is a number', () => {
+    const obj = { '1': 'value' };
+    const result = pipe.transform(obj, '1');
+    expect(result).toBe('value');
+  });
+
+  it('should return the empty value if the input undefined', () => {
+    const result = pipe.transform(undefined as any, '');
+    expect(result).toBe('');
+  });
+
+  it('should handle dynamic property names', () => {
+    const data = {
+      user: {
+        firstName: 'John',
+        ['last-name']: 'Doe', // Dynamic property name
+        address: {
+          city: 'New York',
+          country: 'USA',
+        },
+      },
+    };
+
+    const result = pipe.transform(data, 'user["last-name"]'); // Accessing a dynamic property
+    expect(result).toBe('Doe');
+  });
+})

package/projects/tgo-canopy-ui/pipes/data-property-getter.ts

@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+// TODO: Check type (backend could return a number)
+type DataPropertyGetterType = string;
+
+@Pipe({
+  name: 'dataPropertyGetter',
+  standalone: true,
+})
+export class DataPropertyGetterPipe implements PipeTransform {
+  transform(obj: object, keyName: string = '') {
+    return this.getDeepVal(obj, keyName);
+  }
+
+  private getDeepVal(obj: any, path: string) {
+    if (typeof obj === 'undefined' || obj === null) {
+      return '';
+    }
+    const splittedPath = path.split(/[\.\[\]\"\']{1,2}/);
+    for (let i = 0, l = splittedPath.length; i < l; i++) {
+      if (splittedPath[i] === '') {
+        continue;
+      }
+      obj = obj[splittedPath[i]];
+      if (typeof obj === 'undefined' || obj === null) {
+        return '';
+      }
+    }
+    return obj;
+  }
+}

package/projects/tgo-canopy-ui/pipes/has-validation-error.pipe.spec.ts

@@ -0,0 +1,32 @@
+import { HasValidationErrorPipe } from './has-validation-error.pipe';
+
+describe('HasValidationErrorPipe', () => {
+  let pipe: HasValidationErrorPipe;
+  it('create an instance', () => {
+    pipe = new HasValidationErrorPipe();
+    expect(pipe).toBeTruthy();
+  });
+
+  beforeEach(() => {
+    pipe = new HasValidationErrorPipe();
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return true if value has validation errors', () => {
+    const value = { maxlength: true };
+    expect(pipe.transform(value)).toBe(true);
+  });
+
+  it('should return false if value is null or undefined', () => {
+    expect(pipe.transform(null)).toBe(false);
+    expect(pipe.transform(undefined)).toBe(false);
+  });
+
+  it('should return false if value has no validation errors', () => {
+    const value = { someOtherKey: 'value' };
+    expect(pipe.transform(value)).toBe(false);
+  });
+});

package/projects/tgo-canopy-ui/pipes/has-validation-error.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'hasValidationError',
+  standalone: true,
+})
+export class HasValidationErrorPipe implements PipeTransform {
+  /**
+   * List of the error types that are handled
+   */
+  private readonly errorTypes = ['maxlength', 'minlength', 'min', 'max', 'required', 'email'];
+
+  /**
+   * Checks if the error on the NgControl is in the list of handled error types
+   * @param value
+   */
+  transform(value: Record<string, any> | null | undefined): boolean {
+    return value ? !!Object.keys(value).filter(key => this.errorTypes.includes(key)).length : false;
+  }
+}

package/projects/tgo-canopy-ui/pipes/memoize-func.pipe.spec.ts

@@ -0,0 +1,28 @@
+import { MemoizeFuncPipe } from './memoize-func.pipe';
+
+describe('MemoizeFuncPipe', () => {
+  const pipe = new MemoizeFuncPipe();
+  const arg = true;
+  const methodWrapper = {
+    func: (args: any) => args,
+  };
+  let funcSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    funcSpy = jest.spyOn(methodWrapper, 'func');
+  });
+
+  it('should execute passed function with arguments', () => {
+    pipe.transform(arg, methodWrapper.func);
+    expect(funcSpy).toHaveBeenCalledWith(arg);
+  });
+
+  it('should support function context', () => {
+    const obj = { add(x: number) { return x + this.value; }, value: 5 };
+    const result1 = pipe.transform(1, obj.add, obj);
+    const result2 = pipe.transform(2, obj.add, obj);
+
+    expect(result1).toBe(6);
+    expect(result2).toBe(7);
+  });
+});

package/projects/tgo-canopy-ui/pipes/memoize-func.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+/**
+ *   USAGE:
+ *   {{ argument | memoizeFunc : method [: context] }}
+ *
+ *   You could provide multiple arguments for the function like that:
+ *   {{ [argument1, argument2] | memoizeFunc : method [: context] }}
+ *
+ *
+ *   FUNCTION WITH CONTEXT
+ *   We still could have optimization in impure functions with Angular pipes. Just provide context as second parameter
+ *   to the memoizeFunc pipe.
+ *
+ *   {{ argument | memoizeFunc : method : this }}
+ *
+ *   Alternative variant use 'bind'
+ *
+ *   {{ argument | memoizeFunc : method.bind(this) }}
+ *
+ * */
+@Pipe({
+  name: 'memoizeFunc',
+  standalone: true,
+})
+export class MemoizeFuncPipe implements PipeTransform {
+  transform<T, K>(value: T, handler: (value: T) => K, context?: any): K {
+    if (context) {
+      return handler.call(context, value);
+    }
+
+    return handler(value);
+  }
+}

package/projects/tgo-canopy-ui/pipes/name-initials.pipe.spec.ts

@@ -0,0 +1,44 @@
+import { NameInitialsPipe } from './name-initials.pipe';
+
+describe('NameInitialsPipe', () => {
+  const pipe = new NameInitialsPipe()
+
+  it('create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+  it('should return initials for a full name', () => {
+    const result = pipe.transform('John Doe');
+    expect(result).toBe('JD');
+  });
+
+  it('should return initials for a single name', () => {
+    const result = pipe.transform('John');
+    expect(result).toBe('Jo');
+  });
+
+  it('should handle empty string', () => {
+    const result = pipe.transform('');
+    expect(result).toBe('');
+  });
+
+  it('should handle input with leading/trailing spaces', () => {
+    const result = pipe.transform('  John Doe  ');
+    expect(result).toBe('JD');
+  });
+
+  it('should handle input with multiple spaces between names', () => {
+    const result = pipe.transform('John    Doe');
+    expect(result).toBe('JD');
+  });
+
+  it('should handle input with multiple spaces after the name', () => {
+    const result = pipe.transform('John    ');
+    expect(result).toBe('Jo');
+  });
+
+  it('should return first and last name for multiple words name', () => {
+    const result = pipe.transform('GOLLA ALLI ANIL KUMAR');
+    expect(result).toBe('GK');
+  });
+});

package/projects/tgo-canopy-ui/pipes/name-initials.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'nameInitials',
+})
+export class NameInitialsPipe implements PipeTransform {
+  transform(value: string): string {
+    const initials = value.split(' ').filter(Boolean);
+    if (initials.length > 1) {
+      return initials
+        .map((initial, i) => (i === 0 || i === initials.length - 1 ? initial[0].toUpperCase() : ''))
+        .join('');
+    } else {
+      const firstLetters = value.substring(0, 2);
+      return `${firstLetters[0]?.toUpperCase() ?? ''}${firstLetters[1]?.toLowerCase() ?? ''}`;
+    }
+  }
+}

package/projects/tgo-canopy-ui/pipes/ui-ordinal-suffix.pipe.spec.ts

@@ -0,0 +1,43 @@
+import { OrdinalSuffixPipe } from './ui-ordinal-suffix.pipe';
+
+describe('OrdinalSuffixPipe', () => {
+  let pipe: OrdinalSuffixPipe;
+
+  beforeEach(() => {
+    pipe = new OrdinalSuffixPipe();
+  });
+
+  it('should return "PERCENTILE_SUFFIXES.TH" for numbers between 11 e 13', () => {
+    expect(pipe.transform(11)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(12)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(13)).toBe('PERCENTILE_SUFFIXES.TH');
+  });
+
+  it('should return "PERCENTILE_SUFFIXES.ST" for numbers ended in 1, except 11', () => {
+    expect(pipe.transform(1)).toBe('PERCENTILE_SUFFIXES.ST');
+    expect(pipe.transform(21)).toBe('PERCENTILE_SUFFIXES.ST');
+    expect(pipe.transform(101)).toBe('PERCENTILE_SUFFIXES.ST');
+  });
+
+  it('should return "PERCENTILE_SUFFIXES.ND" for numbers ended in 2, except 12', () => {
+    expect(pipe.transform(2)).toBe('PERCENTILE_SUFFIXES.ND');
+    expect(pipe.transform(22)).toBe('PERCENTILE_SUFFIXES.ND');
+    expect(pipe.transform(102)).toBe('PERCENTILE_SUFFIXES.ND');
+  });
+
+  it('should return "PERCENTILE_SUFFIXES.RD" for numbers ended in 3, except 13', () => {
+    expect(pipe.transform(3)).toBe('PERCENTILE_SUFFIXES.RD');
+    expect(pipe.transform(23)).toBe('PERCENTILE_SUFFIXES.RD');
+    expect(pipe.transform(103)).toBe('PERCENTILE_SUFFIXES.RD');
+  });
+
+  it('should return "PERCENTILE_SUFFIXES.TH" for numbers ended in 4-9 or 0', () => {
+    expect(pipe.transform(4)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(5)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(6)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(7)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(8)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(9)).toBe('PERCENTILE_SUFFIXES.TH');
+    expect(pipe.transform(0)).toBe('PERCENTILE_SUFFIXES.TH');
+  });
+});

package/projects/tgo-canopy-ui/pipes/ui-ordinal-suffix.pipe.ts

@@ -0,0 +1,28 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'ordinalSuffix',
+  standalone: true,
+})
+export class OrdinalSuffixPipe implements PipeTransform {
+
+  transform(value: number): string {
+    const lastDigit = value % 10;
+    const lastTwoDigits = value % 100;
+
+    if (lastTwoDigits >= 11 && lastTwoDigits <= 13) {
+      return 'PERCENTILE_SUFFIXES.TH';
+    }
+
+    switch (lastDigit) {
+      case 1:
+        return 'PERCENTILE_SUFFIXES.ST';
+      case 2:
+        return 'PERCENTILE_SUFFIXES.ND';
+      case 3:
+        return 'PERCENTILE_SUFFIXES.RD';
+      default:
+        return 'PERCENTILE_SUFFIXES.TH';
+    }
+  }
+}

package/projects/tgo-canopy-ui/pipes/ui-translate.pipe.spec.ts

@@ -0,0 +1,66 @@
+import { UiTranslatePipe } from './ui-translate.pipe';
+import { TestBed } from "@angular/core/testing";
+import { LanguageService } from "../utils/localization/language.service";
+import { NO_ERRORS_SCHEMA } from "@angular/core";
+import { Language } from "../utils/localization/language.model";
+
+const translationsMock = {
+  en: {
+    KEY: 'English Key',
+    FIRST_LVL_KEY: { SECOND_LVL_KEY: 'English Key' },
+    NOTIFICATION: {
+      ATTEMPTS: 'You have {{attemptsAmount}} attempts left'
+    }
+  },
+  es: {
+    KEY: 'Spanish Key',
+    FIRST_LVL_KEY: { SECOND_LVL_KEY: 'Nested Spanish Key' },
+  },
+};
+
+describe('UiTranslatePipe', () => {
+  let pipe: UiTranslatePipe;
+  let languageService: LanguageService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [LanguageService],
+      schemas: [NO_ERRORS_SCHEMA]
+    });
+    languageService = TestBed.inject(LanguageService);
+    pipe = new UiTranslatePipe(
+      TestBed.inject(LanguageService)
+    );
+    //@ts-expect-error
+    pipe.LANGS = translationsMock;
+  });
+
+  it('should create an instance', () => {
+    expect(pipe).toBeTruthy();
+  });
+
+
+  it('should translate a simple key in English', (done) => {
+    pipe.transform('FIRST_LVL_KEY.SECOND_LVL_KEY').subscribe((result) => {
+      expect(result).toBe('English Key');
+      done();
+    });
+  });
+
+  it('should translate a nested key in Spanish', (done) => {
+    languageService.setActiveLang(Language.es);
+    pipe.transform('FIRST_LVL_KEY.SECOND_LVL_KEY').subscribe((result) => {
+      expect(result).toBe('Nested Spanish Key');
+      done();
+    });
+  });
+
+  it('should interpolate values in the translation', (done) => {
+    const interpolationData = { attemptsAmount: 5 };
+    languageService.setActiveLang(Language.es);
+    pipe.transform('NOTIFICATION.ATTEMPTS', interpolationData).subscribe((result) => {
+      expect(result).toBe('You have 5 attempts left');
+      done();
+    });
+  });
+});

package/projects/tgo-canopy-ui/pipes/ui-translate.pipe.ts

@@ -0,0 +1,79 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import en from '../assets/i18n/en.json';
+import es from '../assets/i18n/es.json';
+import de from '../assets/i18n/de.json';
+import * as daDk from '../assets/i18n/da-dk.json';
+import fr from '../assets/i18n/fr.json';
+import * as itIt from '../assets/i18n/it-it.json';
+import * as jaJp from '../assets/i18n/ja-jp.json';
+import * as nbNo from '../assets/i18n/nb-no.json';
+import nl from '../assets/i18n/nl.json';
+import * as plPl from '../assets/i18n/pl-pl.json';
+import * as ptBr from '../assets/i18n/pt-br.json';
+import * as svSe from '../assets/i18n/sv-se.json';
+import { LanguageService } from '../utils/localization/language.service';
+import { map, Observable } from 'rxjs';
+
+/**
+ * Used for translations
+ */
+@Pipe({
+  name: 'uiTranslate',
+  standalone: true,
+})
+export class UiTranslatePipe implements PipeTransform {
+  protected readonly LANGS: { [key: string]: any } = {
+    en,
+    es,
+    de,
+    'da-dk': daDk,
+    fr,
+    'it-it': itIt,
+    'ja-jp': jaJp,
+    'nb-no': nbNo,
+    nl,
+    'pl-pl': plPl,
+    'pt-br': ptBr,
+    'sv-se': svSe,
+  };
+
+  constructor(private readonly languageService: LanguageService) {}
+  /**
+   * Finds the translation by keys with interpolation if provided
+   * @param translateKey key, can have multiple keys separated with '.' eg ('KEY', 'FIRST_LVL_KEY.SECOND_LVL_KEY')
+   * @param activeLang current active language
+   * @param interpolationData data that will be used to replace interpolations in translated variant
+   * For example, for translate text like this
+   * 'You have {{attemptsAmount}} attempts left
+   * the interpolation object should be { attemptsAmount: 10 }
+   */
+  transform(translateKey: string, interpolationData?: any): Observable<string> {
+    return this.languageService.getActiveLang().pipe(
+      map(activeLang => {
+        const currentLangObject = JSON.parse(JSON.stringify(this.LANGS[activeLang]));
+        const enLangObject = JSON.parse(JSON.stringify(this.LANGS['en']));
+        const keys = translateKey.split('.');
+        const translation = keys.reduce((acc, currentKey) => acc && acc[currentKey], currentLangObject);
+
+        if (translation) {
+          return this.interpolate(translation, interpolationData);
+        }
+
+        const englishTranslation = keys.reduce((acc, currentKey) => acc && acc[currentKey], enLangObject);
+        return this.interpolate(englishTranslation, interpolationData);
+      })
+    )
+  }
+
+  /**
+   * Used to find and replace interpolation in text
+   * @param translation the translation text
+   * @param interpolationData the interpolation object
+   */
+  private interpolate(translation: string, interpolationData: { [key: string]: any }): string {
+    return translation?.replace(/{{(.*?)}}/g, (match: string, group: string) => {
+      const value = interpolationData[group.trim()] as string;
+      return value ?? match;
+    });
+  }
+}