fonteva-design-guide/force-app/main/default/lwc/pfmLanguagePicker/pfmLanguagePicker.js

## Dev, Build and Test

import { LightningElement, api, track, wire } from 'lwc';
import { authenticatedUser, guestUser } from 'c/multiLanguage';
import { updateRecord, getRecord } from 'lightning/uiRecordApi';

import Id from '@salesforce/user/Id';
import isGuest from '@salesforce/user/isGuest';
import LANGUAGE_FIELD from '@salesforce/schema/User.LanguageLocaleKey';
import CONTACT_ID from '@salesforce/schema/User.ContactId';
import getLanguages from '@salesforce/apex/uiController.getLanguages';

import Language_Picker_Alt_Text from '@salesforce/label/c.Pfm_Language_Picker_Alt_Text';

export default class ChangeLanguage extends LightningElement {
    @api userId = Id;

    @api type = 'dropdown';
    @track dropdown = false;
    @track link = false;
    @track languageList;
    @track displayLanguagePicker;
    @track guestCurrentLanguage;
    @track isAuthenticated = !isGuest;
    @track guestView = false;
    @track currentLanguage;
    @track currentLanguageAltText;

    @wire(getRecord, { recordId: '$userId', fields: [LANGUAGE_FIELD, CONTACT_ID] })
    userRecord;

    connectedCallback() {
        // start getting the language from the wire service in the next event loop
        setTimeout((()=>{
            // add a delay for the wire service to have populated userRecord.data
            setTimeout(()=>{
                const languageValue = this.userRecord.data.fields.LanguageLocaleKey.value;
                const formattedLanguageValue = languageValue.includes('_') ? languageValue.split('_')[0] : languageValue;
                this.currentLanguage = formattedLanguageValue.toUpperCase();

                const displayValue = this.userRecord.data.fields.LanguageLocaleKey.displayValue;
                this.currentLanguageAltText = Language_Picker_Alt_Text.replace('{0}', displayValue);
            },400)
        }).bind(this),400);

        getLanguages()
            .then(data => {
                this.languageList = data.map(elem => {
                    return { name: elem.code.toUpperCase() + ' - ' + elem.name, value: elem.code };
                });
                this.displayLanguagePicker = this.languageList.length > 1;
            })
            .then(() => {
                const displayLanguage = new CustomEvent('languageload', {
                    detail: {
                        view: this.displayLanguagePicker
                    }
                });
                this.dispatchEvent(displayLanguage);
            });

        if (this.type === 'dropdown') {
            this.dropdown = true;
        } else if (this.type === 'link') {
            this.link = true;
        }
        if (isGuest) {
            let urlLanguageValue = new URL(window.location.href).searchParams.get('language');
            this.guestView = true;
            if (urlLanguageValue) {
                if (urlLanguageValue.includes('_')) {
                    urlLanguageValue = urlLanguageValue.split('_')[0];
                }
                this.guestCurrentLanguage = urlLanguageValue.toUpperCase();
            }
        }
        if (this.link) {
            this.classList.add('js-type_link');
        }
    }

    selectLanguage(e) {
        let userIdValue = Id;
        if (!isGuest) {
            let languageOption = e.detail.title ? e.detail.title : e.target.dataset.language,
                languageOptionValue = languageOption.includes('-') ? languageOption.split(' - ')[0] : languageOption;
            if (!this.link) {
                this.template.querySelector('c-pfm-dropdown').startLoader();
            } else {
                this.template.querySelector('c-pfm-loader[data-name="' + e.target.dataset.language + '"]').start();
                this.classList.add('js-disabled');
            }
            authenticatedUser(userIdValue, this.userRecord.data.fields.ContactId.value, languageOptionValue);
        } else {
            let guestLanguageCondition = !this.link ? e.detail.title : e.target.dataset.language;
            if (this.link) {
                this.template.querySelector('c-pfm-loader[data-name="' + e.target.dataset.language + '"]').start();
                this.classList.add('js-disabled');
            }
            guestUser(guestLanguageCondition);
        }
    }
}