Supporting Qatar Arabic language

Author: deathcave

packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts

@@ -20,7 +20,8 @@ const questionChoices = {
 };
 const languages = {
   'English [en]': 'en',
-  'Arabic [ar]': 'ar',
+  'Arabic  [ar]': 'ar',
+  'Arabic (Qatar) [qa-ar]': 'qa-ar',
   'Chinese (PRC) [zh-cn]': 'zh-cn',
   'Chinese (Taiwan) [zh-tw]': 'zh-tw',
   'French [fr]': 'fr',

packages/web-components/src/components/notice-choice/notice-choice.ts

@@ -10,11 +10,7 @@
 import { loadContent, loadSettings, checkEmailStatus } from './services';
 import { html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
-import {
-  pwsValueMap,
-  resetToWorldWideContent,
-  supportedLanguages,
-} from './utils';
+import { pwsValueMap, resetToWorldWideContent } from './utils';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './notice-choice.scss';
@@ -161,6 +157,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   hiddenPhone = '';
 
+  @property({ type: Object, attribute: false })
+  supportedLanguages = {};
+
   connectedCallback() {
     super.connectedCallback();
     this._initSettingsAndContent(this.language);
@@ -203,15 +202,18 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
           /[-_]/
         )[0];
         const supportedLang =
-          supportedLanguages(this.language) ||
-          supportedLanguages(langPart) ||
+          (this.language &&
+            this.supportedLanguages[this.language?.toLowerCase()]) ||
+          (langPart && this.supportedLanguages[langPart?.toLowerCase()]) ||
           'en';
 
         this.isLoading = true;
         loadSettings(
           this.environment,
           (settings) => {
             this.countrySettings = settings.preferences;
+            this.noticeOnly = settings.noticeOnly || ['us'];
+            this.supportedLanguages = settings.supportedLanguages || {};
           },
           (err) => console.error('error loading settings', err)
         );
@@ -337,13 +339,16 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   private _initSettingsAndContent(language: string) {
     const [lang] = language.split(/[-_]/);
     const defaultLang =
-      supportedLanguages(language) || supportedLanguages(lang) || 'en';
+      this.supportedLanguages[language?.toLocaleLowerCase()] ||
+      this.supportedLanguages[lang?.toLocaleLowerCase()] ||
+      'en';
 
     loadSettings(
       this.environment,
       (settings) => {
         this.countrySettings = settings.preferences;
         this.noticeOnly = settings.noticeOnly || ['us'];
+        this.supportedLanguages = settings.supportedLanguages || {};
       },
       () => this.defaultLoadSettings()
     );
@@ -519,6 +524,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       (countryPreferencesSettings) => {
         this.countrySettings = countryPreferencesSettings.preferences;
         this.noticeOnly = countryPreferencesSettings.noticeOnly || ['us'];
+        this.supportedLanguages = settings.supportedLanguages || {};
       },
       (error) => {
         console.error('error loading content', error);

packages/web-components/src/components/notice-choice/utils.ts

@@ -55,46 +55,3 @@ export function pwsValueMap(value) {
     }[value] || null
   );
 }
-
-export function supportedLanguages(language) {
-  const languageMapping = {
-    en: 'en',
-    fr: 'fr',
-    'zh-cn': 'zh-cn',
-    zh: 'zh-cn',
-    de: 'de',
-    id: 'id',
-    it: 'it',
-    ja: 'ja',
-    ko: 'ko',
-    pt: 'pt',
-    'es-la': 'es-la',
-    es: 'es',
-    ar: 'ar',
-    'zh-tw': 'zh-tw',
-    'es-es': 'es',
-    el: 'el',
-    hu: 'hu',
-    he: 'he',
-    ms: 'ms',
-    pl: 'pl',
-    sl: 'sl',
-    tr: 'tr',
-    uk: 'uk',
-    bg: 'bg',
-    cs: 'cs',
-    da: 'da',
-    et: 'et',
-    fi: 'fi',
-    hr: 'hr',
-    lt: 'lt',
-    lv: 'lv',
-    nl: 'nl',
-    no: 'no',
-    ro: 'ro',
-    sk: 'sk',
-    sr: 'sr',
-    vi: 'vi',
-  };
-  return languageMapping[language.toLocaleLowerCase()];
-}