Fixed Default language EN (#10864)

### Related Ticket(s)

[Noitce & Choice w3 Publisher](https://w3.ibm.com/w3publisher/urx/notice-and-choice-v23)

### Description

Notice & Choice is a legally required component to create a form where IBM collects its customer information.
This section shows the specific product's legal links, terms, and conditions. Along with it, it collects users' consent regarding communication preferences.

### Changelog

**New**

-  A new web component to create notice & choice user interface.

**Changed**

-  Notice and Choice content loaded by languages.
-   Set the default language to English.

**Removed**

- Postal option removed from new notice and choice version 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx

@@ -31,13 +31,13 @@ import '@carbon/ibmdotcom-web-components/es/components/notice-choice/index.js';
 
 ```html
 <dds-notice-choice
-    locale="us-en"
+    language="en"
     country="US"
     question-choices="1,2"
     state="CA"
     email=""
     terms-condition-link=""
-    bpid-legal-text="false"
+    bpid-legal-text=""
     enable-all-opt-in=""
     default-values=""
     >

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

@@ -19,7 +19,7 @@ const questionChoices = {
   Email: '1',
   'Email + Phone': '1,2',
 };
-const locales = {
+const languages = {
   'English [en]': 'en',
   'Arabic [ar]': 'ar',
   'Chinese (PRC) [zh-cn]': 'zh-cn',
@@ -36,9 +36,11 @@ const locales = {
   'Malaysian [ms]': 'ms',
   'Polish [pl]': 'pl',
   'Portuguese [pt]': 'pt',
+  'Portuguese (Brazil)': 'pt-br',
   'Slovenian [sl]': 'sl',
   'Spanish [es]': 'es',
   'Spanish-Latin America [es-la]': 'es-la',
+  'Spanish (Mexico)': 'es-MX',
   'Turkish [tr]': 'tr',
   'Ukrainian [uk]': 'uk',
 };
@@ -58,7 +60,7 @@ const onChange = (event: CustomEvent) => {
   console.log(event.detail);
 };
 const props = () => ({
-  locale: select('Language', locales, 'en'),
+  language: select('Language', languages, 'en'),
   country: select('Country', countryList, 'US'),
   state: select('State', stateList, ''),
   questionchoices: select('Question Choices', questionChoices, '1,2'),
@@ -73,7 +75,7 @@ const props = () => ({
 
 export const Default = (args) => {
   const {
-    locale,
+    language,
     country,
     state,
     email,
@@ -86,12 +88,12 @@ export const Default = (args) => {
   } = args?.NoticeChoice ?? {};
   return html`
     <dds-notice-choice
-      locale="${locale}"
+      language="${language}"
       country="${country}"
       question-choices="${questionchoices}"
       state="${state}"
       email=${email}
-      terms-condition-link="${termsConditionLink}"
+      terms-condition-link="${termsConditionLink || ''}"
       ?enable-all-opt-in=${enableAllOptIn}
       bpid-legal-text="${bpidLegalText}"
       .hiddenEmail="${hiddenEmail}"

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

@@ -9,7 +9,12 @@
 
 import { checkPreferencesv3, loadContent } from './services';
 import { html, LitElement, property } from 'lit-element';
-import { emailRegExp, pwsValueMap, resetToWorldWideContent } from './utils';
+import {
+  emailRegExp,
+  pwsValueMap,
+  resetToWorldWideContent,
+  supportedLanguages,
+} from './utils';
 import countrySettings from './country-settings';
 import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import settings from 'carbon-components/es/globals/js/settings';
@@ -44,8 +49,8 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   @property({ type: String, attribute: 'state' })
   state = '';
 
-  @property({ type: String, attribute: 'locale' })
-  locale = 'us-en';
+  @property({ type: String, attribute: 'language' })
+  language = 'en';
 
   @property({ type: String, attribute: 'terms-condition-link' })
   termsConditionLink = html``;
@@ -114,10 +119,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       this.performUpdate();
     }
   }
-  connectedCallback() {
-    super.connectedCallback();
+  defaultLoadContent() {
     loadContent(
-      this.locale,
+      'en',
       (ncData) => {
         this.ncData = ncData;
         this.prepareCheckboxes();
@@ -128,6 +132,29 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       }
     );
   }
+  connectedCallback() {
+    super.connectedCallback();
+    const [language] = this.language.split(/[-_]/);
+
+    let defaultLanguage = 'en';
+    if (supportedLanguages(this.language)) {
+      defaultLanguage = supportedLanguages(this.language);
+    } else if (supportedLanguages(language)) {
+      defaultLanguage = supportedLanguages(language);
+    }
+
+    loadContent(
+      defaultLanguage,
+      (ncData) => {
+        this.ncData = ncData;
+        this.prepareCheckboxes();
+        this.countryChanged();
+      },
+      () => {
+        this.defaultLoadContent();
+      }
+    );
+  }
   setDefaultSelections() {
     if (!this.enableAllOptIn && this.checkboxes) {
       const newValues = { ...this.values };
@@ -152,7 +179,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
     }
   }
   countryChangeAction() {
-    const splitValue = this.locale;
+    const splitValue = this.language;
     if (splitValue == 'en') {
       this.preText = this.preTextTemplate();
     }
@@ -190,17 +217,26 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
         }
         break;
       }
-      case 'locale': {
+      case 'language': {
         // load content when locale changed.
+        const [language] = newVal.split(/[-_]/);
+
+        let defaultLanguage = 'en';
+        if (supportedLanguages(newVal)) {
+          defaultLanguage = supportedLanguages(newVal);
+        } else if (supportedLanguages(language)) {
+          defaultLanguage = supportedLanguages(language);
+        }
+
         if (hasValue && oldVal !== newVal) {
           loadContent(
-            newVal,
+            defaultLanguage,
             (ncData) => {
               this.ncData = ncData;
               this.prepareCheckboxes();
             },
-            (error) => {
-              console.error('error loading content', error);
+            () => {
+              this.defaultLoadContent();
             }
           );
         }
@@ -290,7 +326,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   }
   preTextTemplate() {
     if (this.ncData) {
-      const country = this.country.toLocaleLowerCase();
+      const country = this.country?.toLocaleLowerCase();
       const ecmTranslateContent = this.ncData;
       let preText = ecmTranslateContent.preText;
 
@@ -326,7 +362,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
         postText = '<p part="ncPostText">' + postText + '</p>';
       }
 
-      if (this.termsConditionLink) {
+      if (!this.termsConditionLink.strings && this.termsConditionLink) {
         let originalValue = OtherPreferences;
         const matchedValue = originalValue.match(/<tc>.*<\/tc>/g);
         if (matchedValue) {
@@ -417,8 +453,9 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
     }
   }
   protected _getOptionByQuestion = (question) => {
-    const questionChoiceStatus =
-      countrySettings[this.country.toLocaleLowerCase()];
+    const questionChoiceStatus = this.country
+      ? countrySettings[this.country.toLocaleLowerCase()]
+      : { email: 'opt-in', phone: 'opt-in' };
 
     let option;
     switch (question) {

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

@@ -30,7 +30,7 @@ export function loadContent(locale: string, onSuccess: any, onError: any) {
   const script = document.createElement('script');
   script.async = false;
   script.charset = 'utf-8';
-  script.src = `https://www.ibm.com/common/translations/notice/v23/${locale}/ncContent_v23.js`; // URL for the third-party library being loaded.
+  script.src = `https://www.ibm.com/common/translations/notice/v23/${locale.toLocaleLowerCase()}/ncContent_v23.js`; // URL for the third-party library being loaded.
   document.body.appendChild(script);
   script.onload = () => {
     try {

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

@@ -60,3 +60,46 @@ 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()];
+}