@startinblox/components-ds4go 4.1.4 → 4.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "4.1.4",
+  "version": "4.1.6",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",

package/src/components/modal/ds4go-fact-modal.ts

@@ -2,7 +2,7 @@ import { formatDate, formatCase, OrbitComponent } from "@helpers";
 import { localized, msg } from "@lit/localize";
 import { Task } from "@lit/task";
 import { PropertiesPicker } from "@src/component";
-import type { Category, Fact } from "@src/ds4go";
+import type { Category, Customer, Fact } from "@src/ds4go";
 
 import ModalStyle from "@styles/modal/ds4go-fact-modal.scss?inline";
 import { css, html, nothing, unsafeCSS } from "lit";
@@ -39,7 +39,10 @@ export class Ds4goFactModal extends OrbitComponent {
   ];
 
   @state()
-  disableButton = false;
+  customer?: Customer;
+
+  @state()
+  alreadyGenerated = false;
 
   _generateVideo() {
     this.orbit?.Swal.fire({
@@ -61,25 +64,40 @@ export class Ds4goFactModal extends OrbitComponent {
       },
     }).then((result: any) => {
       if (result.isConfirmed) {
-        this.orbit?.Swal.fire({
-          title: msg("Generating..."),
-          text: msg("Please wait while Tralalère generates your AI-Video..."),
-          icon: "info",
-          showConfirmButton: false,
-          allowOutsideClick: false,
-          allowEscapeKey: false,
-          allowEnterKey: false,
-        });
-        setTimeout(() => {
+        if (this.customer) {
           this.orbit?.Swal.fire({
-            title: msg("AI-Video generated!"),
-            text: msg(
-              "Your AI-Generated video has been generated and is available in your Tralalère space.",
-            ),
-            icon: "success",
+            title: msg("Generating..."),
+            text: msg("Please wait while Tralalère generates your AI-Video..."),
+            icon: "info",
+            showConfirmButton: false,
+            allowOutsideClick: false,
+            allowEscapeKey: false,
+            allowEnterKey: false,
           });
-          this.disableButton = true;
-        }, 2500);
+          window.sib.store.ldp
+            .patch(
+              {
+                "@context": this.customer._originalResource?.serverContext,
+                balance: (this.customer.balance || 0) - 5,
+              },
+              this.customer["@id"],
+            )
+            .then(async () => {
+              if (this.customer) {
+                await window.sib.store.ldp.clearCache(this.customer["@id"]);
+                await window.sib.store.ldp.getData(this.customer["@id"], {});
+              }
+              setTimeout(() => {
+                this.parent.notifyVideoGeneration(this.object["@id"]);
+              }, 2500);
+            });
+        } else {
+          this.orbit?.Swal.fire({
+            title: msg("Error"),
+            text: msg("Customer not found."),
+            icon: "error",
+          });
+        }
       }
     });
   }
@@ -124,13 +142,19 @@ export class Ds4goFactModal extends OrbitComponent {
               type="outline-gray"
               .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
             ></tems-button>
-            <tems-button
-              @click=${this._generateVideo}
-              disabled=${this.disableButton || nothing}
-              >${this.disableButton
-                ? msg("Video already generated")
-                : msg("Generate an AI-Video with Tralalère (5€)")}</tems-button
-            >
+            ${this.customer
+              ? html`<tems-button
+                  @click=${this._generateVideo}
+                  disabled=${this.alreadyGenerated || nothing}
+                  >${(this.customer?.balance || 0) < 5
+                    ? msg("Insufficient balance")
+                    : this.alreadyGenerated
+                      ? msg("Video already generated")
+                      : msg(
+                          "Generate an AI-Video with Tralalère (5€)",
+                        )}</tems-button
+                >`
+              : nothing}
           </div>
           <div class="modal-content-wrapper">
             <div class="modal-box">

package/src/components/solid-fact-bundle-creation.ts

@@ -14,6 +14,7 @@ import type {
   PolicyDefinition,
   PolicyTemplate,
   PropertiesPicker,
+  Resource,
 } from "@src/component";
 import type { Category, Fact } from "@src/ds4go";
 import ComponentStyles from "@styles/fact-bundle-creation.scss?inline";
@@ -86,17 +87,29 @@ export class SolidFactBundle extends OrbitComponent {
   }
 
   cherryPickedProperties: PropertiesPicker[] = [
-    { key: "created_at", value: "created_at", cast: formatDate },
+    { key: "created_at", value: "created_at" },
     { key: "updated_at", value: "updated_at", cast: formatDate },
     { key: "name", value: "name" },
     { key: "description", value: "description" },
     { key: "author", value: "author" },
+    { key: "link", value: "link" },
+    { key: "enclosure", value: "enclosure" },
     {
       key: "categories",
       value: "categories",
       expand: true,
-      cast: (c: Category[]) => sort(c, "name"),
+      cast: (categories: Resource[]) =>
+        (categories || []).map((category: Resource) => ({
+          "@id": category["@id"],
+          name: formatCase(category["name"] || ""),
+        })),
     },
+    { key: "medias", value: "medias", expand: true },
+    { key: "url", value: "url" },
+    { key: "file_size", value: "file_size" },
+    { key: "file_type", value: "file_type" },
+    { key: "width", value: "width" },
+    { key: "height", value: "height" },
   ];
 
   _getResource = new Task(this, {
@@ -479,7 +492,10 @@ export class SolidFactBundle extends OrbitComponent {
             !!this.bundleContractPolicy;
 
           return html`<tems-viewport>
-            <tems-header slot="header" heading=${this.header}>
+            <tems-header
+              slot="header"
+              heading=${`${this.header} - ${this.step === 0 ? msg("Fact checks selection") : msg("Bundle information")}`}
+            >
               <div slot="cta">
                 ${this.step === 0
                   ? html`<tems-button
@@ -497,7 +513,9 @@ export class SolidFactBundle extends OrbitComponent {
                       ><tems-button
                         type="primary"
                         disabled=${!allowCreation || nothing}
-                        label=${msg("Create bundle")}
+                        label=${msg(
+                          str`Create bundle with ${selectedFactsCount} fact${selectedFactsCount > 1 ? "s" : ""}`,
+                        )}
                         @click=${this._createFactBundle}
                       ></tems-button>
                     </div>`}
@@ -516,10 +534,12 @@ export class SolidFactBundle extends OrbitComponent {
                         >
                         <div class="card-grid card-grid-vertical">
                           ${this.selectedFacts.map((fact: Fact) => {
-                            const tags = (fact.categories || []).map((c: Category) => ({
-                              name: c.name,
-                              type: "information",
-                            }));
+                            const tags = (fact.categories || []).map(
+                              (c: Category) => ({
+                                name: c.name,
+                                type: "information",
+                              }),
+                            );
                             if (tags.length > 3) {
                               const overflowTags = tags.length - 3;
                               tags.splice(3, overflowTags);
@@ -529,7 +549,7 @@ export class SolidFactBundle extends OrbitComponent {
                               });
                             }
                             return html`<ds4go-card-catalog
-                              .object=${import.meta.env.DEV ? fact : nothing}
+                              .object=${fact}
                               .header=${fact.name || nothing}
                               date=${fact.updated_at || nothing}
                               @click=${this._toggleFactSelection.bind(
@@ -575,10 +595,8 @@ export class SolidFactBundle extends OrbitComponent {
                                         });
                                       }
 
-                                      return html`<ds4go-card-catalog
-                                        .object=${import.meta.env.DEV
-                                          ? fact
-                                          : nothing}
+                                      return html`<ds4go-card-fact
+                                        .object=${fact}
                                         .tags=${tags}
                                         .header=${fact.name || nothing}
                                         .content=${fact.description || nothing}
@@ -587,7 +605,7 @@ export class SolidFactBundle extends OrbitComponent {
                                           this,
                                           fact,
                                         )}
-                                      ></ds4go-card-catalog>`;
+                                      ></ds4go-card-fact>`;
                                     })}
                                   </div>
                                   ${splicedDatas.length < datas.length
@@ -657,8 +675,9 @@ export class SolidFactBundle extends OrbitComponent {
                             ${Array.from(
                               new Set(
                                 this.selectedFacts.flatMap((fact: Fact) =>
-                                  (fact.categories || []).map((category: Category) =>
-                                    formatCase(category.name || ""),
+                                  (fact.categories || []).map(
+                                    (category: Category) =>
+                                      formatCase(category.name || ""),
                                   ),
                                 ),
                               ),

package/src/components/solid-fact-list.ts

@@ -6,6 +6,7 @@ import {
   setupCacheInvalidation,
   sort,
 } from "@helpers";
+import { msg } from "@lit/localize";
 import { Task } from "@lit/task";
 import type {
   Asset,
@@ -16,7 +17,7 @@ import type {
   Resource,
   SearchObject,
 } from "@src/component";
-import type { Category, Fact } from "@src/ds4go";
+import type { Customer, Fact } from "@src/ds4go";
 import { css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
@@ -55,6 +56,15 @@ export class SolidFactList extends OrbitComponent {
   @state()
   consumerAgreements: ContractAgreement[] = [];
 
+  @property({ attribute: "customers-src", type: String })
+  customersSrc?: string;
+
+  @state()
+  customer?: Customer;
+
+  @state()
+  alreadyGeneratedVideos: string[] = [];
+
   cherryPickedProperties: PropertiesPicker[] = [
     { key: "created_at", value: "created_at", cast: formatDate },
     { key: "updated_at", value: "updated_at", cast: formatDate },
@@ -63,7 +73,7 @@ export class SolidFactList extends OrbitComponent {
 
   async _afterAttach() {
     setupCacheInvalidation(this, {
-      keywords: ["fact"],
+      keywords: ["customers", "fact"],
     });
 
     // use this.dspConnector.instance to reach the connector
@@ -75,7 +85,7 @@ export class SolidFactList extends OrbitComponent {
   }
 
   _getResource = new Task(this, {
-    task: async ([objSrc]) => {
+    task: async ([objSrc, customersSrc]) => {
       if (
         !this.orbit ||
         (!this.noRouter &&
@@ -85,6 +95,14 @@ export class SolidFactList extends OrbitComponent {
       )
         return;
 
+      const customers: Customer[] = customersSrc
+        ? ((await this._getProxyValue(customersSrc, true, [
+            { key: "name", value: "name" },
+            { key: "participant_id", value: "participant_id" },
+            { key: "balance", value: "balance" },
+          ])) as Customer[]) || []
+        : [];
+
       if (this.dspConnector?.instance) {
         // Get all data from DSP connector
         await this.dspConnector.instance.loadAll();
@@ -93,6 +111,10 @@ export class SolidFactList extends OrbitComponent {
           "participant-id"
         ];
         if (participantId) {
+          this.customer = customers.find(
+            (c) => c.participant_id === participantId,
+          );
+
           // Load agreements for all negotiations to find consumer/provider relationships
           const allNegotiations = this.dspConnector.instance.negotiations || [];
 
@@ -163,15 +185,11 @@ export class SolidFactList extends OrbitComponent {
                   key: "categories",
                   value: "categories",
                   expand: true,
-                  cast: async (c: Resource) =>
-                    await Promise.all(
-                      (await c._originalResource?.["ldp:contains"]).map(
-                        async (c: Category) => ({
-                          "@id": c["@id"],
-                          name: formatCase((await c["name"]) || ""),
-                        }),
-                      ),
-                    ),
+                  cast: (categories: Resource[]) =>
+                    (categories || []).map((category: Resource) => ({
+                      "@id": category["@id"],
+                      name: formatCase(category["name"] || ""),
+                    })),
                 },
                 { key: "medias", value: "medias", expand: true },
                 { key: "url", value: "url" },
@@ -211,7 +229,12 @@ export class SolidFactList extends OrbitComponent {
 
       return [];
     },
-    args: () => [this.dataSrc, this.caching, this.currentRoute],
+    args: () => [
+      this.dataSrc,
+      this.customersSrc,
+      this.caching,
+      this.currentRoute,
+    ],
   });
 
   _search(e: Event) {
@@ -260,6 +283,27 @@ export class SolidFactList extends OrbitComponent {
     }
   }
 
+  notifyVideoGeneration(id: string) {
+    this.alreadyGeneratedVideos.push(id);
+    if (this.customer) {
+      document.dispatchEvent(
+        new CustomEvent("save", {
+          detail: {
+            resource: { "@id": this.customer["@id"] },
+          },
+          bubbles: true,
+        }),
+      );
+    }
+    this.orbit?.Swal.fire({
+      title: msg("AI-Video generated!"),
+      text: msg(
+        "Your AI-Generated video has been generated and is available in your Tralalère space.",
+      ),
+      icon: "success",
+    });
+  }
+
   _resultCountUpdate(e: Event) {
     this.resultCount = e.detail ?? 0;
   }
@@ -283,7 +327,17 @@ export class SolidFactList extends OrbitComponent {
       },
       complete: (datas) => {
         return html`<tems-viewport>
-          <tems-header slot="header" heading=${this.header}></tems-header>
+          <tems-header slot="header" heading=${this.header}>
+            <div slot="cta">
+              <tems-badge type="brand"
+                >Balance:
+                ${new Intl.NumberFormat(undefined, {
+                  style: "currency",
+                  currency: "EUR",
+                }).format(Number(this.customer?.balance || 0))}</tems-badge
+              >
+            </div>
+          </tems-header>
           <div slot="content">
             <ds4go-catalog-filter-holder
               .displayFiltering=${this.displayFiltering}
@@ -305,7 +359,12 @@ export class SolidFactList extends OrbitComponent {
                   @click=${this._closeModalFromBackground}
                 >
                   <ds4go-fact-modal
+                    .parent=${this}
+                    .customer=${this.customer}
                     .object=${this.object}
+                    .alreadyGenerated=${this.alreadyGeneratedVideos.includes(
+                      this.object["@id"],
+                    )}
                     @close=${this._closeModal}
                   ></ds4go-fact-modal>
                 </div>`

package/src/helpers/components/orbitComponent.ts

@@ -215,10 +215,13 @@ export default class extends ComponentObjectsHandler {
     return await this._responseAdaptator(response);
   }
 
-  async _hasCherryPickedProperties(resource: Resource) {
+  async _hasCherryPickedProperties(
+    resource: Resource,
+    targetProperties = this.cherryPickedProperties,
+  ) {
     const properties = await resource.properties;
 
-    for (const prop of this.cherryPickedProperties) {
+    for (const prop of targetProperties) {
       if (properties?.includes(prop.key)) {
         return true;
       }
@@ -251,7 +254,7 @@ export default class extends ComponentObjectsHandler {
       if (typeof target !== "object" || target === null) return;
 
       if (target.isContainer?.() && target["ldp:contains"]) {
-        if (await this._hasCherryPickedProperties(target)) {
+        if (await this._hasCherryPickedProperties(target, targetProperties)) {
           return await this._getProperties(target, recursive, targetProperties);
         }
 

package/src/styles/fact-bundle-creation.scss

@@ -37,7 +37,7 @@ section {
 .card-grid-vertical {
   justify-content: stretch;
 
-  ds4go-card-catalog {
+  ds4go-card-catalog, ds4go-card-fact {
     width: 354px;
     height: fit-content;
   }