@shop-prompter/react 0.1.1 → 1.0.0

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

@@ -0,0 +1,212 @@
+"use client";
+import * as React from "react";
+import { useState, useEffect } from "react";
+import { productApi } from "./api/product-api";
+const styles = {
+  productCardsContainer: {
+    marginTop: "0.75rem",
+    display: "flex",
+    gap: "0.75rem",
+    overflowX: "auto",
+    width: "100%",
+    paddingBottom: "0.5rem",
+    boxSizing: "border-box",
+    scrollbarWidth: "thin",
+    scrollSnapType: "x mandatory",
+    WebkitOverflowScrolling: "touch",
+  },
+  productCard: {
+    minWidth: "9.5rem",
+    maxWidth: "9.5rem",
+    backgroundColor: "white",
+    border: "1px solid #f3f4f6",
+    borderRadius: "0.75rem",
+    overflow: "hidden",
+    boxShadow:
+      "0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03)",
+    display: "flex",
+    flexDirection: "column",
+    scrollSnapAlign: "start",
+  },
+  productImageContainer: {
+    height: "7rem",
+    backgroundColor: "#f9fafb",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: "0.5rem",
+    borderBottom: "1px solid #f3f4f6",
+  },
+  productImage: {
+    maxHeight: "100%",
+    maxWidth: "100%",
+    objectFit: "contain",
+  },
+  productInfo: {
+    padding: "0.625rem",
+    display: "flex",
+    flexDirection: "column",
+    gap: "0.25rem",
+  },
+  productName: {
+    fontSize: "0.8125rem",
+    fontWeight: 600,
+    color: "#1f2937",
+    margin: 0,
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+  },
+  productPrice: {
+    fontSize: "0.8125rem",
+    fontWeight: 500,
+    color: "#4b5563",
+    margin: 0,
+  },
+  statusContainer: {
+    padding: "0.5rem 0",
+    fontSize: "0.75rem",
+    color: "#6b7280",
+    display: "flex",
+    alignItems: "center",
+    gap: "0.5rem",
+  },
+  errorText: {
+    color: "#ef4444",
+  },
+  spinner: {
+    color: "#6b7280",
+  },
+  wrapper: {
+    width: "100%",
+    maxWidth: "100%",
+    boxSizing: "border-box",
+    overflow: "hidden",
+  },
+};
+
+function ProductCardList(props) {
+  const [products, setProducts] = useState(() => []);
+
+  const [loading, setLoading] = useState(() => false);
+
+  const [error, setError] = useState(() => null);
+
+  function fetchProducts() {
+    let skusList = props.skus;
+    if (typeof skusList === "string") {
+      skusList = skusList
+        .split(",")
+        .map((s) => s.trim())
+        .filter(Boolean);
+    }
+    if (!skusList || skusList.length === 0) {
+      setProducts([]);
+      setLoading(false);
+      return;
+    }
+    if (productApi.isCached(skusList)) {
+      setProducts(productApi.getCached(skusList));
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    productApi
+      .getProducts(skusList)
+      .then((data) => {
+        setProducts(data || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to fetch products:", err);
+        setError(err?.message || "Failed to load products");
+        setLoading(false);
+      });
+  }
+
+  function getProductName(product) {
+    const locale = props.defaultLocale || "de";
+    const localized =
+      product.localization?.[locale] ||
+      Object.values(product.localization || {})[0];
+    return localized?.name || product.sku;
+  }
+
+  function getProductPrice(product) {
+    if (!product.pricing) return "";
+    const priceVal = product.pricing.gross;
+    const currency = product.pricing.currency;
+    if (priceVal === undefined || priceVal === null) return "";
+    return priceVal.toFixed(2) + " " + (currency || "€");
+  }
+
+  function getProductImage(product) {
+    return (
+      product.images?.[0] || "https://placehold.co/150x150?text=" + product.sku
+    );
+  }
+
+  useEffect(() => {
+    fetchProducts();
+  }, []);
+  useEffect(() => {
+    fetchProducts();
+  }, [
+    props.skus
+      ? Array.isArray(props.skus)
+        ? props.skus.join(",")
+        : props.skus
+      : "",
+  ]);
+
+  return (
+    <>
+      {props.skus && props.skus.length > 0 ? (
+        <>
+          <div style={styles.wrapper}>
+            {loading ? (
+              <div style={styles.statusContainer}>
+                <span>Loading products...</span>
+              </div>
+            ) : null}
+            {!loading && error ? (
+              <div style={styles.statusContainer}>
+                <span style={styles.errorText}>Error: {error}</span>
+              </div>
+            ) : null}
+            {!loading && products && products.length > 0 ? (
+              <div style={styles.productCardsContainer}>
+                {products?.map((product) => (
+                  <div key={product.sku} style={styles.productCard}>
+                    <div style={styles.productImageContainer}>
+                      <img
+                        src={getProductImage(product)}
+                        alt={getProductName(product)}
+                        style={styles.productImage}
+                      />
+                    </div>
+                    <div style={styles.productInfo}>
+                      <p
+                        style={styles.productName}
+                        title={getProductName(product)}
+                      >
+                        {getProductName(product)}
+                      </p>
+                      <p style={styles.productPrice}>
+                        {getProductPrice(product)}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            ) : null}
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}
+
+export default ProductCardList;