@salesforcedevs/dw-components 1.3.265 → 1.3.276

package/lwc.config.json

@@ -19,6 +19,7 @@
         "dw/j2sCardSequence",
         "dw/j2sCardSequenceStep",
         "dw/j2sForm",
+        "dw/languageSelector",
         "dw/newsletterForm",
         "dw/podcastSubscription",
         "dw/podcastsGrid",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dw-components",
-    "version": "1.3.265",
+    "version": "1.3.276",
     "description": "Lightning web components for https://developer.salesforce.com",
     "license": "MIT",
     "engines": {
@@ -26,5 +26,5 @@
         "@types/setimmediate": "^1.0.2",
         "setimmediate": "^1.0.5"
     },
-    "gitHead": "840b94133684a800cbdc7432f9df4d69a15cc0e9"
+    "gitHead": "68472f3ee152fe24d86b26e5c4343271ce664cb8"
 }

package/src/modules/dw/languageSelector/languageSelector.html

@@ -0,0 +1,9 @@
+<template>
+    <dx-select
+        options={languages}
+        onchange={handleLanguageChange}
+        placement="bottom-end"
+        value={selectedLanguage}
+        disabled={noTranslationsAvailable}
+    ></dx-select>
+</template>

package/src/modules/dw/languageSelector/languageSelector.ts

@@ -0,0 +1,86 @@
+import { track as trackClick } from "dxUtils/analytics";
+import { api, LightningElement, track } from "lwc";
+import { SelectOption } from "typings/custom";
+
+const ANALYTICS_INFO = {
+    element_title: "Select Language",
+    content_category: "cta"
+};
+
+const language_local_names_map: any = {
+    japanese: "日本語",
+    english: "english"
+};
+
+export default class LanguageSelector extends LightningElement {
+    @track languages = [] as SelectOption[];
+    @track selectedLanguage?: string;
+    @api postAcf!: string;
+    @api postId?: string;
+
+    _languageMap = {} as any;
+
+    generateTranslationOptions = async () => {
+        const acf = JSON.parse(this.postAcf);
+
+        try {
+            const canonicalId = acf?.canonicalid;
+
+            const alternatePosts: any[] = await (
+                await fetch(
+                    `https://developer.salesforce.com/blogs/wp-json/wp/v2/post-translations/${
+                        canonicalId || this.postId
+                    }`
+                )
+            ).json();
+
+            alternatePosts.forEach(
+                (post: { acf: { language: string }; link: string }) => {
+                    const localLanguageName =
+                        language_local_names_map[post.acf.language] ||
+                        language_local_names_map.english;
+                    this._languageMap[localLanguageName] = post.link;
+                }
+            );
+
+            this.languages = alternatePosts.map((post) => {
+                return {
+                    value:
+                        language_local_names_map[post.acf.language] ||
+                        language_local_names_map.english,
+                    label:
+                        language_local_names_map[post.acf.language] ||
+                        language_local_names_map.english,
+                    disabled: false
+                };
+            });
+        } catch (e) {
+            console.error(e);
+        }
+
+        this.selectedLanguage =
+            language_local_names_map[acf?.language] ||
+            language_local_names_map.english;
+    };
+
+    connectedCallback() {
+        this.generateTranslationOptions();
+    }
+
+    handleLanguageChange(evt: CustomEvent): void {
+        const selectedLanguage = evt.detail.value;
+        const url = this._languageMap[selectedLanguage];
+        trackClick(this.template.activeElement!, "custEv_ctaButtonClick", {
+            ...ANALYTICS_INFO,
+            element_type: "button",
+            click_text: selectedLanguage,
+            click_url: url
+        });
+
+        window.location.href = url;
+    }
+
+    get noTranslationsAvailable() {
+        return this.languages.length === 0;
+    }
+}