@shop-prompter/react 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # shop-prompter-react
 
+## 1.1.0
+
+### Minor Changes
+
+- 8fe8877: Configurable card content
+
 ## 1.0.0
 
 ### Major Changes

package/dist/index.js

@@ -800,6 +800,14 @@ var styles = {
     overflow: "hidden",
     textOverflow: "ellipsis"
   },
+  productDynamicField: {
+    fontSize: "0.6875rem",
+    color: "#6b7280",
+    margin: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
   productPrice: {
     fontSize: "0.8125rem",
     fontWeight: 500,
@@ -864,11 +872,43 @@ function ProductCardList(props) {
     const localized = ((_a = product.localization) == null ? void 0 : _a[locale]) || Object.values(product.localization || {})[0];
     return (localized == null ? void 0 : localized.name) || product.sku;
   }
+  function showPriceIfEmptyVal() {
+    const val = props.showPriceIfEmpty;
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return val != null ? val : false;
+  }
+  function visibleFieldsList() {
+    const val = props.visibleFields;
+    if (typeof val === "string") {
+      try {
+        return JSON.parse(val);
+      } catch (e) {
+        return val.split(",").map((s) => s.trim()).filter(Boolean);
+      }
+    }
+    return val || [];
+  }
+  function getDynamicField(product, field) {
+    var _a;
+    const locale = props.defaultLocale || "de";
+    const localized = ((_a = product.localization) == null ? void 0 : _a[locale]) || Object.values(product.localization || {})[0];
+    if (!localized) return void 0;
+    const parts = field.split(".");
+    let current = localized;
+    for (let i = 0; i < parts.length; i++) {
+      if (current === void 0 || current === null) return void 0;
+      current = current[parts[i]];
+    }
+    return current;
+  }
   function getProductPrice(product) {
     if (!product.pricing) return "";
     const priceVal = product.pricing.gross;
     const currency = product.pricing.currency;
     if (priceVal === void 0 || priceVal === null) return "";
+    if (priceVal === 0 && !showPriceIfEmptyVal()) return "";
     return priceVal.toFixed(2) + " " + (currency || "\u20AC");
   }
   function getProductImage(product) {
@@ -889,27 +929,40 @@ function ProductCardList(props) {
       "Error: ",
       error
     ] }) }) : null,
-    !loading && products && products.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.productCardsContainer, children: products == null ? void 0 : products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.productCard, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.productImageContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        "img",
-        {
-          src: getProductImage(product),
-          alt: getProductName(product),
-          style: styles.productImage
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.productInfo, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "p",
+    !loading && products && products.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.productCardsContainer, children: products == null ? void 0 : products.map((product) => {
+      var _a;
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.productCard, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles.productImageContainer, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "img",
           {
-            style: styles.productName,
-            title: getProductName(product),
-            children: getProductName(product)
+            src: getProductImage(product),
+            alt: getProductName(product),
+            style: styles.productImage
           }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: styles.productPrice, children: getProductPrice(product) })
-      ] })
-    ] }, product.sku)) }) : null
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles.productInfo, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "p",
+            {
+              style: styles.productName,
+              title: getProductName(product),
+              children: getProductName(product)
+            }
+          ),
+          (_a = visibleFieldsList()) == null ? void 0 : _a.map(
+            (field) => getDynamicField(product, field) !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "p",
+              {
+                style: styles.productDynamicField,
+                title: String(getDynamicField(product, field)),
+                children: String(getDynamicField(product, field))
+              }
+            ) : null
+          ),
+          getProductPrice(product) !== "" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: styles.productPrice, children: getProductPrice(product) }) : null
+        ] })
+      ] }, product.sku);
+    }) }) : null
   ] }) }) : null });
 }
 var product_card_list_component_default = ProductCardList;
@@ -1322,7 +1375,6 @@ var TRANSLATIONS = {
   welcomeDescription: "I am your personal AI shopping assistant. Ask me anything about our products!",
   askMeAnything: "Ask me anything...",
   thinking: "Thinking...",
-  findByBudget: "Find by budget",
   feedbackError: "We are sorry, but we could not process your feedback. Please try again later."
 };
 var ICONS = {
@@ -1330,7 +1382,6 @@ var ICONS = {
   shopprompter: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/bot.svg",
   popularitems: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/fire.svg",
   compareproducts: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/box.svg",
-  findbybudget: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/foto.svg",
   sendHorizontal: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/send-horizontal.svg"
 };
 function ShopPrompter(props) {
@@ -1359,6 +1410,24 @@ function ShopPrompter(props) {
     const apiKey = (_b2 = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _b2.apiKey;
     return !token && !apiKey;
   }
+  function showPriceIfEmptyVal() {
+    const val = props.showPriceIfEmpty;
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return val != null ? val : false;
+  }
+  function visibleFieldsList() {
+    const val = props.visibleFields;
+    if (typeof val === "string") {
+      try {
+        return JSON.parse(val);
+      } catch (e) {
+        return val.split(",").map((s) => s.trim()).filter(Boolean);
+      }
+    }
+    return val || [];
+  }
   function themeObj() {
     if (typeof props.theme === "string") {
       try {
@@ -2096,7 +2165,9 @@ function ShopPrompter(props) {
                             product_card_list_component_default,
                             {
                               skus: message.productSkus,
-                              defaultLocale: props.defaultLocale
+                              defaultLocale: props.defaultLocale,
+                              showPriceIfEmpty: showPriceIfEmptyVal(),
+                              visibleFields: visibleFieldsList()
                             }
                           ) : null
                         ] }) : null

package/dist/index.mjs

@@ -764,6 +764,14 @@ var styles = {
     overflow: "hidden",
     textOverflow: "ellipsis"
   },
+  productDynamicField: {
+    fontSize: "0.6875rem",
+    color: "#6b7280",
+    margin: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis"
+  },
   productPrice: {
     fontSize: "0.8125rem",
     fontWeight: 500,
@@ -828,11 +836,43 @@ function ProductCardList(props) {
     const localized = ((_a = product.localization) == null ? void 0 : _a[locale]) || Object.values(product.localization || {})[0];
     return (localized == null ? void 0 : localized.name) || product.sku;
   }
+  function showPriceIfEmptyVal() {
+    const val = props.showPriceIfEmpty;
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return val != null ? val : false;
+  }
+  function visibleFieldsList() {
+    const val = props.visibleFields;
+    if (typeof val === "string") {
+      try {
+        return JSON.parse(val);
+      } catch (e) {
+        return val.split(",").map((s) => s.trim()).filter(Boolean);
+      }
+    }
+    return val || [];
+  }
+  function getDynamicField(product, field) {
+    var _a;
+    const locale = props.defaultLocale || "de";
+    const localized = ((_a = product.localization) == null ? void 0 : _a[locale]) || Object.values(product.localization || {})[0];
+    if (!localized) return void 0;
+    const parts = field.split(".");
+    let current = localized;
+    for (let i = 0; i < parts.length; i++) {
+      if (current === void 0 || current === null) return void 0;
+      current = current[parts[i]];
+    }
+    return current;
+  }
   function getProductPrice(product) {
     if (!product.pricing) return "";
     const priceVal = product.pricing.gross;
     const currency = product.pricing.currency;
     if (priceVal === void 0 || priceVal === null) return "";
+    if (priceVal === 0 && !showPriceIfEmptyVal()) return "";
     return priceVal.toFixed(2) + " " + (currency || "\u20AC");
   }
   function getProductImage(product) {
@@ -853,27 +893,40 @@ function ProductCardList(props) {
       "Error: ",
       error
     ] }) }) : null,
-    !loading && products && products.length > 0 ? /* @__PURE__ */ jsx3("div", { style: styles.productCardsContainer, children: products == null ? void 0 : products.map((product) => /* @__PURE__ */ jsxs3("div", { style: styles.productCard, children: [
-      /* @__PURE__ */ jsx3("div", { style: styles.productImageContainer, children: /* @__PURE__ */ jsx3(
-        "img",
-        {
-          src: getProductImage(product),
-          alt: getProductName(product),
-          style: styles.productImage
-        }
-      ) }),
-      /* @__PURE__ */ jsxs3("div", { style: styles.productInfo, children: [
-        /* @__PURE__ */ jsx3(
-          "p",
+    !loading && products && products.length > 0 ? /* @__PURE__ */ jsx3("div", { style: styles.productCardsContainer, children: products == null ? void 0 : products.map((product) => {
+      var _a;
+      return /* @__PURE__ */ jsxs3("div", { style: styles.productCard, children: [
+        /* @__PURE__ */ jsx3("div", { style: styles.productImageContainer, children: /* @__PURE__ */ jsx3(
+          "img",
           {
-            style: styles.productName,
-            title: getProductName(product),
-            children: getProductName(product)
+            src: getProductImage(product),
+            alt: getProductName(product),
+            style: styles.productImage
           }
-        ),
-        /* @__PURE__ */ jsx3("p", { style: styles.productPrice, children: getProductPrice(product) })
-      ] })
-    ] }, product.sku)) }) : null
+        ) }),
+        /* @__PURE__ */ jsxs3("div", { style: styles.productInfo, children: [
+          /* @__PURE__ */ jsx3(
+            "p",
+            {
+              style: styles.productName,
+              title: getProductName(product),
+              children: getProductName(product)
+            }
+          ),
+          (_a = visibleFieldsList()) == null ? void 0 : _a.map(
+            (field) => getDynamicField(product, field) !== void 0 ? /* @__PURE__ */ jsx3(
+              "p",
+              {
+                style: styles.productDynamicField,
+                title: String(getDynamicField(product, field)),
+                children: String(getDynamicField(product, field))
+              }
+            ) : null
+          ),
+          getProductPrice(product) !== "" ? /* @__PURE__ */ jsx3("p", { style: styles.productPrice, children: getProductPrice(product) }) : null
+        ] })
+      ] }, product.sku);
+    }) }) : null
   ] }) }) : null });
 }
 var product_card_list_component_default = ProductCardList;
@@ -1286,7 +1339,6 @@ var TRANSLATIONS = {
   welcomeDescription: "I am your personal AI shopping assistant. Ask me anything about our products!",
   askMeAnything: "Ask me anything...",
   thinking: "Thinking...",
-  findByBudget: "Find by budget",
   feedbackError: "We are sorry, but we could not process your feedback. Please try again later."
 };
 var ICONS = {
@@ -1294,7 +1346,6 @@ var ICONS = {
   shopprompter: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/bot.svg",
   popularitems: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/fire.svg",
   compareproducts: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/box.svg",
-  findbybudget: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/foto.svg",
   sendHorizontal: "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/send-horizontal.svg"
 };
 function ShopPrompter(props) {
@@ -1323,6 +1374,24 @@ function ShopPrompter(props) {
     const apiKey = (_b2 = apiConfigObj == null ? void 0 : apiConfigObj()) == null ? void 0 : _b2.apiKey;
     return !token && !apiKey;
   }
+  function showPriceIfEmptyVal() {
+    const val = props.showPriceIfEmpty;
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return val != null ? val : false;
+  }
+  function visibleFieldsList() {
+    const val = props.visibleFields;
+    if (typeof val === "string") {
+      try {
+        return JSON.parse(val);
+      } catch (e) {
+        return val.split(",").map((s) => s.trim()).filter(Boolean);
+      }
+    }
+    return val || [];
+  }
   function themeObj() {
     if (typeof props.theme === "string") {
       try {
@@ -2060,7 +2129,9 @@ function ShopPrompter(props) {
                             product_card_list_component_default,
                             {
                               skus: message.productSkus,
-                              defaultLocale: props.defaultLocale
+                              defaultLocale: props.defaultLocale,
+                              showPriceIfEmpty: showPriceIfEmptyVal(),
+                              visibleFields: visibleFieldsList()
                             }
                           ) : null
                         ] }) : null

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shop-prompter/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/api/product-api.ts

@@ -18,7 +18,8 @@ export interface ProductCategory {
 
 export interface ProductLocalization {
   name: string
-  description: string
+  description: string,
+  extra: Record<string, any>,
 }
 
 export interface ProductApiResponse {

package/src/product-card-list.component.jsx

@@ -57,6 +57,14 @@ const styles = {
     overflow: "hidden",
     textOverflow: "ellipsis",
   },
+  productDynamicField: {
+    fontSize: "0.6875rem",
+    color: "#6b7280",
+    margin: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
   productPrice: {
     fontSize: "0.8125rem",
     fontWeight: 500,
@@ -134,11 +142,50 @@ function ProductCardList(props) {
     return localized?.name || product.sku;
   }
 
+  function showPriceIfEmptyVal() {
+    const val = props.showPriceIfEmpty;
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return val ?? false;
+  }
+
+  function visibleFieldsList() {
+    const val = props.visibleFields;
+    if (typeof val === "string") {
+      try {
+        return JSON.parse(val);
+      } catch (e) {
+        return val
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
+      }
+    }
+    return val || [];
+  }
+
+  function getDynamicField(product, field) {
+    const locale = props.defaultLocale || "de";
+    const localized =
+      product.localization?.[locale] ||
+      Object.values(product.localization || {})[0];
+    if (!localized) return undefined;
+    const parts = field.split(".");
+    let current = localized;
+    for (let i = 0; i < parts.length; i++) {
+      if (current === undefined || current === null) return undefined;
+      current = current[parts[i]];
+    }
+    return current;
+  }
+
   function getProductPrice(product) {
     if (!product.pricing) return "";
     const priceVal = product.pricing.gross;
     const currency = product.pricing.currency;
     if (priceVal === undefined || priceVal === null) return "";
+    if (priceVal === 0 && !showPriceIfEmptyVal()) return "";
     return priceVal.toFixed(2) + " " + (currency || "€");
   }
 
@@ -194,9 +241,21 @@ function ProductCardList(props) {
                       >
                         {getProductName(product)}
                       </p>
-                      <p style={styles.productPrice}>
-                        {getProductPrice(product)}
-                      </p>
+                      {visibleFieldsList()?.map((field) =>
+                        getDynamicField(product, field) !== undefined ? (
+                          <p
+                            style={styles.productDynamicField}
+                            title={String(getDynamicField(product, field))}
+                          >
+                            {String(getDynamicField(product, field))}
+                          </p>
+                        ) : null
+                      )}
+                      {getProductPrice(product) !== "" ? (
+                        <p style={styles.productPrice}>
+                          {getProductPrice(product)}
+                        </p>
+                      ) : null}
                     </div>
                   </div>
                 ))}

package/src/shop-prompter.component.jsx

@@ -414,7 +414,6 @@ const TRANSLATIONS = {
     "I am your personal AI shopping assistant. Ask me anything about our products!",
   askMeAnything: "Ask me anything...",
   thinking: "Thinking...",
-  findByBudget: "Find by budget",
   feedbackError:
     "We are sorry, but we could not process your feedback. Please try again later.",
 };
@@ -426,8 +425,6 @@ const ICONS = {
     "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/fire.svg",
   compareproducts:
     "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/box.svg",
-  findbybudget:
-    "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/foto.svg",
   sendHorizontal:
     "https://cdn.jsdelivr.net/gh/lucide-icons/lucide@latest/icons/send-horizontal.svg",
 };
@@ -470,6 +467,29 @@ function ShopPrompter(props) {
     return !token && !apiKey;
   }
 
+  function showPriceIfEmptyVal() {
+    const val = props.showPriceIfEmpty;
+    if (typeof val === "string") {
+      return val === "true";
+    }
+    return val ?? false;
+  }
+
+  function visibleFieldsList() {
+    const val = props.visibleFields;
+    if (typeof val === "string") {
+      try {
+        return JSON.parse(val);
+      } catch (e) {
+        return val
+          .split(",")
+          .map((s) => s.trim())
+          .filter(Boolean);
+      }
+    }
+    return val || [];
+  }
+
   function themeObj() {
     if (typeof props.theme === "string") {
       try {
@@ -1288,6 +1308,8 @@ function ShopPrompter(props) {
                               <ProductCardList
                                 skus={message.productSkus}
                                 defaultLocale={props.defaultLocale}
+                                showPriceIfEmpty={showPriceIfEmptyVal()}
+                                visibleFields={visibleFieldsList()}
                               />
                             ) : null}
                           </div>