@salesforcedevs/dx-components 1.3.233 → 1.3.235

package/lwc.config.json

@@ -33,6 +33,7 @@
         "dx/checkboxGroup",
         "dx/checkboxNative",
         "dx/codeBlock",
+        "dx/coveoRecommendations",
         "dx/dropdown",
         "dx/emptyState",
         "dx/faq",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.233",
+    "version": "1.3.235",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -44,5 +44,5 @@
     "volta": {
         "node": "16.19.1"
     },
-    "gitHead": "785bc6c465ffebb8863a7656806f10aab70d3cb5"
+    "gitHead": "20dfffe17d70ea773baaf0c9fd71b3c3e1b0162b"
 }

package/src/modules/dx/cardBlogPost/cardBlogPost.ts

@@ -13,6 +13,7 @@ export default class CardBlogPost extends LightningElement {
     @api target?: string | null = null;
     @api title!: string;
     @api authors?: Array<any> | null = null;
+    @api origin?: string = "wordpress";
 
     // LWC is being compiled so that datetime is being interpreted as date-time
     // ONLY from from the implementation in dx-card-blog-post-provider
@@ -26,7 +27,8 @@ export default class CardBlogPost extends LightningElement {
             click_url: `${window.location.origin}${this.href}`,
             element_title: this.title,
             element_type: "card",
-            content_category: "link"
+            content_category: "link",
+            recommendation_type: this.origin
         };
         track(event.target!, "custEv_blogCardClick", {
             ...payload,

package/src/modules/dx/coveoRecommendations/coveoRecommendations.css

@@ -0,0 +1,8 @@
+.spinner-container {
+    position: relative;
+    margin-top: 85px;
+}
+
+dx-section.section-reduced-padding {
+    --dx-c-section-padding-vertical: unset;
+}

package/src/modules/dx/coveoRecommendations/coveoRecommendations.html

@@ -0,0 +1,24 @@
+<template>
+    <dx-section lwc:if={showRecommendations} class="section-reduced-padding">
+        <dx-spinner lwc:if={recommendationsLoading}>
+            <div class="spinner-container">
+                <dx-spinner size="large" variant="brand"></dx-spinner>
+            </div>
+        </dx-spinner>
+        <dx-grid columns="three" class="recent-posts">
+            <template for:each={recommendations} for:item="recommendation">
+                <dx-card-blog-post
+                    authors={recommendation.authors}
+                    body={recommendation.yoast_head_json.description}
+                    datetime={recommendation.yoast_head_json.article_published_time}
+                    href={recommendation.yoast_head_json.canonical}
+                    img-alt={recommendation.yoast_head_json.title}
+                    img-src={recommendation.featured_image}
+                    key={recommendation.id}
+                    title={recommendation.yoast_head_json.title}
+                    origin="coveo"
+                ></dx-card-blog-post>
+            </template>
+        </dx-grid>
+    </dx-section>
+</template>

package/src/modules/dx/coveoRecommendations/coveoRecommendations.ts

@@ -0,0 +1,57 @@
+import { LightningElement, api } from "lwc";
+
+export default class CoveoRecommendations extends LightningElement {
+    @api coveoAuthToken!: string;
+
+    _recommendations = [] as any[];
+
+    private get recommendations(): any[] {
+        return this._recommendations || [];
+    }
+
+    showRecommendations = true;
+    recommendationsLoading = true;
+
+    connectedCallback() {
+        const actionsHistory = localStorage.getItem(
+            "__coveo.analytics.history"
+        );
+        const url = "https://platform.cloud.coveo.com/rest/search/v2";
+        fetch(url, {
+            headers: {
+                Authorization: `Bearer ${this.coveoAuthToken}`,
+                "Content-Type": "application/json"
+            },
+            method: "POST",
+            body: JSON.stringify({
+                pipeline: "Recommendations_Developer_Blogs",
+                searchHub: "developerWebsiteBlogs",
+                numberOfResults: 3,
+                actionsHistory: JSON.parse(actionsHistory!)
+            })
+        }).then(
+            async (response) => {
+                try {
+                    const results = (await response.json()).results;
+                    const blogDataLoadTasks = results
+                        .slice(0, 3)
+                        .map(async (rec: any) => {
+                            const slug = rec.uri.split("/").pop();
+                            const blogDataUrl = `https://developer.salesforce.com/blogs/wp-json/wp/v2/posts?slug=${slug}&state=publish&_embed=wp:featuredmedia`;
+                            return (await (await fetch(blogDataUrl)).json())[0];
+                        });
+                    this._recommendations = await Promise.all(
+                        blogDataLoadTasks
+                    );
+                } catch (ex) {
+                    this.showRecommendations = false;
+                } finally {
+                    this.recommendationsLoading = false;
+                }
+            },
+            () => {
+                this.showRecommendations = false;
+            }
+        );
+    }
+}